Grid
The Grid layout creates equal-width columns using CSS Grid with configurable column count. This component provides a simple way to create responsive grid layouts with automatic column sizing, making it perfect for card layouts, image galleries, or any content that needs to be displayed in a structured grid format.
Example
<div class="grid-4 --gap-2">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-gap |
0 |
Gap between child elements |
--layout-amount |
2 |
Number of columns |
Class Utilities
| Class | Description |
|---|---|
.--gap-* |
Controls spacing between items using Feo.css design tokens for size |
.grid-3 |
Sets 3 columns |
.grid-4 |
Sets 4 columns |
.grid-5 |
Sets 5 columns |
.grid-6 |
Sets 6 columns |