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.

grid-cols-1 on mobile

grid-cols-3 on desktop

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

Column spans

col-span-2

autofill

col-span-full

<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

row-span-2

cell

<div class="grid grid-cols-2 grid-rows-3 gap-2 demo-min-h220">
  <div class="row-span-2 p-3 border rounded text-center"><span>row-span-2</span></div>
  <div class="p-3 border rounded text-center"><span>cell</span></div>
  <div class="p-3 border rounded text-center"><span>cell</span></div>
  <div class="p-3 border rounded text-center"><span>cell</span></div>
</div>

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>

Auto-fill & Auto-fit responsive grids

Build responsive card decks that adjust column count based on available container width without media queries using .grid-auto-fill or .grid-auto-fit:

Card A

Card B

Card C

<div class="grid grid-auto-fit gap-3">
  <div class="p-3 border rounded"><span>Card A</span></div>
  <div class="p-3 border rounded"><span>Card B</span></div>
  <div class="p-3 border rounded"><span>Card C</span></div>
</div>

Enterprise layout templates

boodoo provides preconfigured layout column templates for SaaS applications:

.grid-cols-tier: Auto-fit pricing tier cards (min 300px).
.grid-cols-search: Split row with fluid input and fixed action button.
.grid-cols-line: Header line layout with icon, fluid text, and action trigger.
.grid-cols-simulation: 3-column workspace with left inspector, fluid canvas, and right control panel.

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.