SuperGrid Documentation — AZ UI Kit

# Basic Usage

HTML

<div data-az-component="super-grid"
     data-az-columns="3"
     data-az-gap="24">
  
  <div data-az-grid-item>Card 1</div>
  <div data-az-grid-item>Card 2</div>
  <div data-az-grid-item>Card 3</div>
  <div data-az-grid-item>Card 4</div>
  <div data-az-grid-item>Card 5</div>
  <div data-az-grid-item>Card 6</div>
  
</div>

Grid Attributes

Attribute	Type	Default	Description
data-az-columns	number \| "auto"	3	Number of columns or "auto" for auto-fit
data-az-gap	number	16	Gap between items in pixels
data-az-gap-x	number	—	Horizontal gap (overrides data-az-gap)
data-az-gap-y	number	—	Vertical gap (overrides data-az-gap)
data-az-min-width	number	250	Min item width for auto columns
data-az-layout	string	"grid"	"grid" \| "masonry"
data-az-animate	boolean	true	Animate layout changes

# Responsive Breakpoints

Define different column counts for each breakpoint.

HTML

<div data-az-component="super-grid"
     data-az-columns="1"
     data-az-columns-sm="2"
     data-az-columns-md="3"
     data-az-columns-lg="4"
     data-az-columns-xl="5">
  ...
</div>

Breakpoint Values

Suffix	Min Width	Typical Device
(none)	0px	Mobile (default)
-sm	640px	Large phones
-md	768px	Tablets
-lg	1024px	Laptops
-xl	1280px	Desktops
-2xl	1536px	Large desktops

# Masonry Layout

Pinterest-style layout that fills vertical gaps.

HTML

<div data-az-component="super-grid"
     data-az-layout="masonry"
     data-az-columns="3"
     data-az-gap="16">
  
  <!-- Items with varying heights -->
  <div data-az-grid-item>Short content</div>
  <div data-az-grid-item>
    Longer content that takes
    multiple lines and creates
    a taller card
  </div>
  <div data-az-grid-item>Medium</div>
  
</div>

Note: Masonry recalculates on window resize and when items are added/removed. For dynamic content, call SuperGrid.relayout() after DOM changes.

# Drag and Drop

Enable drag-and-drop reordering with persistence support.

HTML

<div data-az-component="super-grid"
     data-az-columns="3"
     data-az-draggable="true"
     data-az-drag-handle=".drag-handle"
     data-az-save-order="/api/widgets/order">
  
  <div data-az-grid-item data-az-item-id="widget-1">
    <div class="drag-handle">⋮⋮</div>
    Widget 1
  </div>
  
  <div data-az-grid-item data-az-item-id="widget-2">
    <div class="drag-handle">⋮⋮</div>
    Widget 2
  </div>
  
</div>

Drag Attributes

Attribute	Description
data-az-draggable	Enable drag-and-drop (boolean)
data-az-drag-handle	CSS selector for drag handle element
data-az-save-order	URL to POST new order after reorder
data-az-drag-group	Allow dragging between grids with same group
data-az-item-id	Unique ID for each item (on grid-item)

# Infinite Scroll

Load more items automatically as user scrolls.

HTML

<div data-az-component="super-grid"
     data-az-columns="3"
     data-az-infinite="true"
     data-az-infinite-url="/api/items"
     data-az-infinite-threshold="200">
  
  <!-- Initial items -->
  <div data-az-grid-item>...</div>
  
</div>

<!-- Loading indicator -->
<div data-az-infinite-loader class="hidden">
  Loading more...
</div>

<!-- End message -->
<div data-az-infinite-end class="hidden">
  No more items
</div>

Server Response

Server returns HTML fragment

<!-- More grid items -->
<div data-az-grid-item>Item 21</div>
<div data-az-grid-item>Item 22</div>
<div data-az-grid-item>Item 23</div>

<!-- Signal no more items -->
<script>SuperGrid.endInfinite()</script>

# Filtering & Search

Client-side filtering with animated transitions.

HTML

<!-- Filter controls -->
<div data-az-grid-filters="products-grid">
  <button data-az-filter="*" class="active">All</button>
  <button data-az-filter=".electronics">Electronics</button>
  <button data-az-filter=".clothing">Clothing</button>
  <button data-az-filter=".furniture">Furniture</button>
</div>

<!-- Search -->
<input type="search" data-az-grid-search="products-grid">

<!-- Grid -->
<div data-az-component="super-grid"
     data-az-id="products-grid"
     data-az-columns="4">
  
  <div data-az-grid-item class="electronics" data-az-search-text="iPhone Pro">
    iPhone Pro
  </div>
  <div data-az-grid-item class="clothing" data-az-search-text="Winter Jacket">
    Winter Jacket
  </div>
  
</div>

# Events

Event	Description	Detail
az:grid:layout	Layout calculation complete	{ columns, items }
az:grid:reorder	Item order changed via drag	{ item, from, to, order }
az:grid:filter	Filter applied	{ filter, visible, hidden }
az:grid:search	Search query changed	{ query, matches }
az:grid:load	Infinite scroll loaded items	{ page, items }
az:grid:end	No more items to load	{ total }