Grid
A lightweight semantic grid layout component built with native HTML and CSS variables.
The Grid component in ignix-lite uses the [data-grid] attribute on any semantic container element - <section>, <ul>, <article>, etc. - and supports responsive column counts, gap sizes, alignment, dense packing, and column/row span helpers.
Two Column
- Preview
- Code
<section data-grid="2">
<article>Column 1</article>
<article>Column 2</article>
</section>
Three Column
- Preview
- Code
<section data-grid="3">
<article>Column 1</article>
<article>Column 2</article>
<article>Column 3</article>
</section>
Four Column
- Preview
- Code
<section data-grid="4">
<article>Column 1</article>
<article>Column 2</article>
<article>Column 3</article>
<article>Column 4</article>
</section>
Five Column
- Preview
- Code
<section data-grid="5">
<article>Col 1</article>
<article>Col 2</article>
<article>Col 3</article>
<article>Col 4</article>
<article>Col 5</article>
</section>
Six Column
- Preview
- Code
<section data-grid="6">
<article>Col 1</article>
<article>Col 2</article>
<article>Col 3</article>
<article>Col 4</article>
<article>Col 5</article>
<article>Col 6</article>
</section>
Auto Fit
Columns size and wrap automatically - no breakpoints needed.
- Preview
- Code
<section data-grid="auto">
<article>Item 1</article>
<article>Item 2</article>
<article>Item 3</article>
<article>Item 4</article>
<article>Item 5</article>
</section>
Auto Fill
Like auto-fit but preserves empty column slots rather than collapsing them.
- Preview
- Code
<section data-grid="fill">
<article>Item 1</article>
<article>Item 2</article>
<article>Item 3</article>
</section>
Gap
- Preview
- Code
<section data-grid="3" data-gap="sm">...</section>
<section data-grid="3" data-gap="lg">...</section>
<section data-grid="3" data-gap="xl">...</section>
Align Center
- Preview
- Code
<section data-grid="3" data-align="center">
<article>Tall</article>
<article>Short</article>
<article>Medium</article>
</section>
Align End
- Preview
- Code
<section data-grid="3" data-align="end">
<article>Tall</article>
<article>Short</article>
<article>Medium</article>
</section>
Column Span
- Preview
- Code
<section data-grid="4">
<article data-col="2">Span 2</article>
<article>Col</article>
<article>Col</article>
<article>Col</article>
<article>Col</article>
<article>Col</article>
</section>
Full Width Span
- Preview
- Code
<section data-grid="3">
<article>Col 1</article>
<article>Col 2</article>
<article>Col 3</article>
<article data-col="full">Full Width</article>
</section>
Row Span
- Preview
- Code
<section data-grid="3">
<article data-row="2">Row Span 2</article>
<article>B</article>
<article>C</article>
<article>D</article>
<article>E</article>
</section>
Dense Packing
Items back-fill empty slots automatically.
- Preview
- Code
<section data-grid="4" data-dense>
<article data-col="2">Wide</article>
<article>A</article>
<article>B</article>
<article>C</article>
<article data-col="3">Wider</article>
<article>D</article>
</section>
Mixed Spans
- Preview
- Code
<section data-grid="6" data-gap="sm">
<article data-col="3">Span 3</article>
<article data-col="2">Span 2</article>
<article>1</article>
<article data-col="full">Full</article>
</section>
Attributes
| Attribute | Type | Description |
|---|---|---|
data-grid | '1' | '2' | '3' | '4' | '5' | '6' | 'auto' | 'fill' | Sets the column layout on the grid container |
data-gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Controls the gap between grid items |
data-align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | Aligns items on the cross axis |
data-justify | 'start' | 'center' | 'end' | 'stretch' | Justifies items on the inline axis |
data-dense | boolean | Enables dense packing to back-fill empty slots |
data-col | '1' | '2' | '3' | '4' | '5' | '6' | 'full' | Sets column span on a child item |
data-row | '2' | '3' | Sets row span on a child item |