CSS Grid

Build complex, two-dimensional layouts using boodoo's modern CSS Grid utilities — a Tailwind-inspired suite of grid-cols-*, col-span-*, and grid-flow-* helpers layered over native CSS Grid.

Basic grid

CSS Grid is powerful for flexible row + column layouts. Use the responsive .grid container with .grid-cols-* (responsive) and .col-span-* column spans.

<div class="grid grid-cols-1 grid-cols-md-3 gap-3">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Column spans

<div class="grid grid-cols-3 gap-2">
  <div class="col-span-2">col-span-2</div>
  <div>autofill</div>
  <div>autofill</div>
  <div class="col-span-full">col-span-full</div>
</div>

Row spans & template rows

Grid auto flow

Use .grid-flow-col to place items in a column flow, great for horizontal strips.

<div class="grid grid-flow-col auto-cols-max gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Grid vs flex

Reach for flexbox when you have a one-dimensional row or column to align (navbars, button groups, simple lists). Reach for CSS Grid when you want to control layout in two dimensions — rows and columns, with true gap control and spans.