Source

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

← layout: Flow layout: Pancake →