SuperGrid

Intelligent responsive grid layouts with masonry support and auto-placement. Define breakpoints, gaps, and column spans via data-* attributes.

Responsive Masonry Auto-placement Gap Control

View Full Documentation

What Makes It Super

Breakpoint Columns

Define different column counts per breakpoint. Mobile-first responsive design with intuitive attribute naming.

<div data-az-component="super-grid"
     data-az-cols="1"
     data-az-cols-sm="2"
     data-az-cols-md="3"
     data-az-cols-lg="4">

Masonry Layout

Pinterest-style masonry with automatic height calculation. CSS-only implementation with JavaScript fallback for older browsers.

<div data-az-layout="masonry"
     data-az-masonry-balance="true"
     data-az-masonry-gap="24">

Item Spanning

Items can span multiple columns and rows. Feature cards, hero sections, and complex layouts without custom CSS.

<div data-az-span="2"
     data-az-span-md="3"
     data-az-row-span="2">
  Featured Card
</div>

Responsive Gaps

Different gap sizes per breakpoint. Row and column gaps can be set independently.

<div data-az-gap="16"
     data-az-gap-md="24"
     data-az-gap-lg="32"
     data-az-row-gap="24"
     data-az-col-gap="16">

Auto-fit & Auto-fill

Automatic column sizing based on content. Set minimum and maximum column widths.

<div data-az-auto="fit"
     data-az-min-col="280px"
     data-az-max-col="1fr">

Named Regions

CSS Grid template areas via data attributes. Complex dashboard layouts without writing CSS.

<div data-az-areas="header header"
     "sidebar main"
     "footer footer">
  <nav data-az-area="header"></nav>
  <aside data-az-area="sidebar"></aside>
</div>

Complete Example

A responsive card grid with featured items spanning multiple columns.

<div 
  data-az-component="super-grid"
  data-az-cols="1"
  data-az-cols-sm="2"
  data-az-cols-lg="4"
  data-az-gap="24"
  data-az-gap-lg="32">
  
  <!-- Featured item spans 2 columns -->
  <article data-az-span="1" data-az-span-lg="2">
    <h3>Featured Article</h3>
  </article>
  
  <!-- Regular items -->
  <article>Card 1</article>
  <article>Card 2</article>
  
  <!-- Full-width item -->
  <article data-az-span="full">
    <h3>Full Width Banner</h3>
  </article>
  
  <article>Card 3</article>
  <article>Card 4</article>
  
</div>

Ready for Flexible Layouts?

SuperGrid is part of AZ UI Kit. Request a briefing to learn more about our enterprise licensing.

请求简报 Back to AZ UI Kit