Mixed-size tiles via spans — modern feature walls.

The pattern#

html
<div class="grid gap-4 md:grid-cols-3 auto-rows-[160px]">
  <div class="rounded-2xl border md:col-span-2">wide</div>
  <div class="rounded-2xl border md:row-span-2">tall</div>
</div>

Responsive behavior#

Every pattern here is breakpoint-agnostic at its core — add sm:/md:/lg: prefixes to the grid/flex containers to tune when it collapses. Because the primitives are utilities, responsiveness is a prefix, never a rewrite.

When to use#

  • Feature walls
  • Portfolios
  • Dashboards

patterns/index|All patterns · utilities/grid/grid-template-columns|Grid · utilities/flexbox/flex-direction|Flexbox