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 --amount-4" style="--layout-gap: 1rem">
  <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

Class Utilities