@subcomponents/grid - CSS layout library

Grid layout (12 fractions)

12/12

6/12

4/12

3/12

<div class="display-grid gap-1">
  <div class="width-6">...</div>
  <div class="width-6">...</div>
  ...
</div>

Height

.height-2

<div class="display-grid gap-1">
  <div class="width-12-xs width-12-md width-6-lg height-2-lg">...</div>
  <div class="width-12-xs width-6-md">...</div>
  <div class="width-12-xs width-6-md">...</div>
</div>

Auto-fill

Fill items as they appear

Optional: .grid[style="--min-width: <length>"]

div

<div class="display-grid auto-fill gap-1">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Gap

.grid.gap-n (0-5)

.width-max

.grid[style="--gap: <length>"]

.width-max