Grid #

The Grid utility in the aFP Design System provides a simple, responsive grid layout that automatically adjusts the number of columns based on available space. It’s designed for flexible, content-driven layouts that remain consistent across screen sizes.

By default, the grid uses display: grid and defines columns that grow or shrink dynamically to fit their content, while maintaining a consistent gap between items.

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Custom Properties #

Variable	Default	Description
`--afp-grid-min-column-size`	`20ch`	Sets the minimum width of a column.

Examples #

Sizing #

By default, grid items reflow when a column becomes narrower than 20ch. You can adjust this behavior by defining a custom minimum column width with the --afp-grid-min-column-size variable.

<div class="afp-stack">
  <div class="afp-grid" style="--afp-grid-min-column-size: 200px;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="afp-grid" style="--afp-grid-min-column-size: 8rem;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-grid" style="--afp-grid-min-column-size: 200px;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="afp-grid" style="--afp-grid-min-column-size: 8rem;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-grid" style="--afp-grid-min-column-size: 200px;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="afp-grid" style="--afp-grid-min-column-size: 8rem;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-grid" style="--afp-grid-min-column-size: 200px;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="afp-grid" style="--afp-grid-min-column-size: 8rem;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Span #

Applying afp-span-grid to a grid item makes it stretch across all columns, placing the item on its own full-width row.

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div class="afp-span-grid"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div class="afp-span-grid"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div class="afp-span-grid"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="afp-grid">
  <div></div>
  <div></div>
  <div></div>
  <div class="afp-span-grid"></div>
  <div></div>
  <div></div>
  <div></div>
</div>