Layout

Grid

The .grid layout creates responsive columns that wrap to fit the available space. Use it for card lists, feature blocks, and galleries with a variable number of items.

Usage

• Add class="grid" to the parent element.
• Optionally, set the following custom properties:
  • --gap: Sets the spacing between items. The current token value is .
  • --grid-min-size: Sets the preferred minimum item width. The default is 16rem.
  • --grid-placement: Controls track placement. Use auto-fill or auto-fit. The default is auto-fill.
• Use .halves to create two columns or .thirds to create three columns when enough space is available.