Flexbox Grid

The Flexbox Grid is a utility composition for creating flexible, responsive grid layouts using CSS Flexbox. It allows child elements to automatically wrap and resize based on available space, making it ideal for cards, tiles, or any repeatable content.

Features

• Uses CSS Flexbox for layout.
• Responsive: items wrap to new lines as needed.
• Customizable gap between items via CSS variable.
• Minimum item width can be set via CSS variable.

Usage

Add the .flexbox-grid class to a container. Place any number of child elements inside; each will automatically size and wrap as needed.

<div class="flexbox-grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- ... -->
</div>

Customization

• Minimum Item Width:
  Set --min on .flexbox-grid to control the minimum width of each item (default: 10ch).

  <div class="flexbox-grid" style="--min: 200px;">
    <!-- items -->
  </div>
  

• Gap Between Items:
  Set --grid-gap to control the space between items (default: uses --spacing-6).

  <div class="flexbox-grid" style="--grid-gap: 2rem;">
    <!-- items -->
  </div>
  

Example

<div class="flexbox-grid" style="--min: 180px; --grid-gap: 1.5rem;">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

Each child will take up at least 180px of width and wrap to a new line if there is not enough space.

HTML Code (Demo)

<div class="flexbox-grid">
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
</div>

Configuration

{
  "headline": "Flexbox Grid"
}