Card grid

A responsive grid for cards or any tiles (.casca-card-grid). Columns auto-fit at a configurable minimum width and collapse to a single column when the container is narrower, with no media or container query to set up. Resize the window to watch the columns reflow.

Default

<div class="casca-card-grid">
  <article class="casca-card"> ... </article>
  <!-- ... -->
</div>

Tighter columns

Set --casca-card-grid-min to change the minimum column width (here 7rem), so more cards fit per row before collapsing.

<div class="casca-card-grid" style="--casca-card-grid-min: 7rem"> ... </div>

Card →  ·  See them assembled →