Cluster #

The aFP Design System’s cluster utility creates flexible layouts that arrange elements in a horizontal flow, wrapping them automatically when needed. By default, items are evenly spaced using the system’s medium gap size and aligned to the start of the container.

Clusters can be customized further by combining them with alignment, gap, and other layout utilities. This makes it easy to build adaptive, well-structured groups of elements that stay consistent across different screen sizes and contexts.

Example #

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

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

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

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