Grid System

Complete CSS grid system with 12-column layouts, responsive breakpoints, column spanning, and gap utilities. All classes are pre-compiled — no build step needed.

Basic Grid

Preview

<div class="grid grid-cols-3 gap-4">
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">4</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">5</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">6</div>
</div>

Requires: ux.min.css

<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;">
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">4</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">5</div>
  <div class="bg-primary/10 text-primary font-semibold rounded-box p-4 text-center">6</div>
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS grid

Responsive Grid

Preview

<!-- 1 col on mobile, 2 on sm, 3 on md, 4 on lg -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">4</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">5</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">6</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">7</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">8</div>
</div>

Requires: ux.min.css

<!-- Responsive: grid-cols-1 → sm:grid-cols-2 → md:grid-cols-3 → lg:grid-cols-4 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">4</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">5</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">6</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">7</div>
  <div class="bg-info/10 text-info font-semibold rounded-box p-4 text-center">8</div>
</div>

Requires: tw.min.css

// No JavaScript required
// Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)

12-Column Layout

Preview

Sidebar

Navigation, filters, etc.

Main Content

Primary content area spanning 9 of 12 columns on desktop, full width on mobile.

<div class="grid grid-cols-12 gap-4">
  <!-- Sidebar: 3 columns -->
  <div class="col-span-12 md:col-span-3 bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-2">Sidebar</div>
    <div class="text-sm text-base-content/60">Navigation, filters, etc.</div>
  </div>
  <!-- Main: 9 columns -->
  <div class="col-span-12 md:col-span-9 bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-2">Main Content</div>
    <div class="text-sm text-base-content/60">Primary content area spanning 9 of 12 columns on desktop, full width on mobile.</div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-12 gap-4">
  <!-- Sidebar: 3 columns on md+, full on mobile -->
  <div class="col-span-12 md:col-span-3 bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-2">Sidebar</div>
    <div class="text-sm text-base-content/60">Navigation, filters, etc.</div>
  </div>
  <!-- Main: 9 columns on md+, full on mobile -->
  <div class="col-span-12 md:col-span-9 bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-2">Main Content</div>
    <div class="text-sm text-base-content/60">Primary content area spanning 9 of 12 columns on desktop, full width on mobile.</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Column Spanning

Preview

span 2

span 3

span full

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-success/10 text-success font-semibold rounded-box p-4 text-center">span 2</div>
  <div class="bg-success/10 text-success font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-success/10 text-success font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-success/10 text-success font-semibold rounded-box p-4 text-center">1</div>
  <div class="col-span-3 bg-success/10 text-success font-semibold rounded-box p-4 text-center">span 3</div>
  <div class="col-span-full bg-success/15 text-success font-semibold rounded-box p-4 text-center">span full</div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-success/10 text-success font-semibold rounded-box p-4 text-center">span 2</div>
  <div class="bg-success/10 text-success font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-success/10 text-success font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-success/10 text-success font-semibold rounded-box p-4 text-center">1</div>
  <div class="col-span-3 bg-success/10 text-success font-semibold rounded-box p-4 text-center">span 3</div>
  <div style="grid-column: 1 / -1;" class="bg-success/15 text-success font-semibold rounded-box p-4 text-center">span full</div>
</div>

Requires: tw.min.css

// No JavaScript required

Gap Variants

Preview

gap-2

gap-4

gap-8

<!-- gap-2 (8px) -->
<div class="grid grid-cols-4 gap-2 mb-4">
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
</div>

<!-- gap-4 (16px) -->
<div class="grid grid-cols-4 gap-4 mb-4">
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
</div>

<!-- gap-8 (32px) -->
<div class="grid grid-cols-4 gap-8">
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
</div>

Requires: ux.min.css

<!-- gap-2 = 0.5rem (8px) -->
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem;" class="mb-4">
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-2</div>
</div>

<!-- gap-4 = 1rem (16px) -->
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;" class="mb-4">
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-4</div>
</div>

<!-- gap-8 = 2rem (32px) -->
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;">
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
  <div class="bg-warning/10 text-warning font-semibold rounded-box p-3 text-center text-sm">gap-8</div>
</div>

Requires: tw.min.css

// No JavaScript required
// Available gaps: gap-0, gap-1 (4px), gap-2 (8px), gap-3 (12px),
// gap-4 (16px), gap-5 (20px), gap-6 (24px), gap-8 (32px),
// gap-10 (40px), gap-12 (48px), gap-16 (64px)
// Also: gap-x-* (column gap) and gap-y-* (row gap)

Row Spanning

Preview

row-span-2

<div class="grid grid-cols-3 grid-rows-2 gap-4" style="min-height: 200px;">
  <div class="row-span-2 bg-error/10 text-error font-semibold rounded-box p-4 flex items-center justify-center">
    row-span-2
  </div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">4</div>
</div>

Requires: ux.min.css

<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1rem; min-height: 200px;">
  <div style="grid-row: span 2 / span 2;" class="bg-error/10 text-error font-semibold rounded-box p-4 flex items-center justify-center">
    row-span-2
  </div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-error/10 text-error font-semibold rounded-box p-4 text-center">4</div>
</div>

Requires: tw.min.css

// No JavaScript required

Auto Fill / Auto Fit

Preview

auto-fill (min 150px)

auto-fit (min 150px)

<!-- Auto-fill: creates as many 150px+ columns as fit -->
<p class="text-sm text-base-content/60 mb-2">auto-fill (min 150px)</p>
<div class="grid gap-4 mb-6" style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">4</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">5</div>
</div>

<!-- Auto-fit: same but stretches items to fill space -->
<p class="text-sm text-base-content/60 mb-2">auto-fit (min 150px)</p>
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
  <div class="bg-secondary/10 text-secondary font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-secondary/10 text-secondary font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-secondary/10 text-secondary font-semibold rounded-box p-4 text-center">3</div>
</div>

Requires: ux.min.css

<!-- auto-fill: responsive columns without breakpoints -->
<p class="text-sm text-base-content/60 mb-2">auto-fill (min 150px)</p>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem;" class="mb-6">
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">3</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">4</div>
  <div class="bg-accent/10 text-accent font-semibold rounded-box p-4 text-center">5</div>
</div>

<!-- auto-fit: stretches items to fill remaining space -->
<p class="text-sm text-base-content/60 mb-2">auto-fit (min 150px)</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
  <div class="bg-secondary/10 text-secondary font-semibold rounded-box p-4 text-center">1</div>
  <div class="bg-secondary/10 text-secondary font-semibold rounded-box p-4 text-center">2</div>
  <div class="bg-secondary/10 text-secondary font-semibold rounded-box p-4 text-center">3</div>
</div>

Requires: tw.min.css

// auto-fill vs auto-fit:
// auto-fill: creates empty tracks when items don't fill the row
// auto-fit: collapses empty tracks so items stretch to fill space
// Both are responsive without needing breakpoint classes

Nested Grids

Preview

Left Section

Right Section

full

<div class="grid grid-cols-2 gap-4">
  <div class="bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-3">Left Section</div>
    <div class="grid grid-cols-2 gap-2">
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">A</div>
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">B</div>
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">C</div>
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">D</div>
    </div>
  </div>
  <div class="bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-3">Right Section</div>
    <div class="grid grid-cols-3 gap-2">
      <div class="bg-success/10 text-success text-sm rounded-field p-2 text-center">1</div>
      <div class="bg-success/10 text-success text-sm rounded-field p-2 text-center">2</div>
      <div class="bg-success/10 text-success text-sm rounded-field p-2 text-center">3</div>
      <div class="col-span-3 bg-success/10 text-success text-sm rounded-field p-2 text-center">full</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;">
  <div class="bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-3">Left Section</div>
    <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;">
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">A</div>
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">B</div>
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">C</div>
      <div class="bg-primary/10 text-primary text-sm rounded-field p-2 text-center">D</div>
    </div>
  </div>
  <div class="bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-3">Right Section</div>
    <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;">
      <div class="bg-success/10 text-success text-sm rounded-field p-2 text-center">1</div>
      <div class="bg-success/10 text-success text-sm rounded-field p-2 text-center">2</div>
      <div class="bg-success/10 text-success text-sm rounded-field p-2 text-center">3</div>
      <div style="grid-column: 1 / -1;" class="bg-success/10 text-success text-sm rounded-field p-2 text-center">full</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Holy Grail Layout

Preview

Header

Main

Primary content area

<div class="grid grid-cols-12 gap-4" style="min-height: 300px;">
  <!-- Header -->
  <header class="col-span-12 bg-neutral text-neutral-content rounded-box p-4 flex items-center">
    <span class="font-semibold">Header</span>
  </header>
  <!-- Nav -->
  <nav class="col-span-12 md:col-span-2 bg-base-200 rounded-box p-4">
    <div class="font-semibold text-sm mb-2">Nav</div>
    <div class="text-sm text-base-content/60">Links...</div>
  </nav>
  <!-- Main -->
  <main class="col-span-12 md:col-span-7 bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-2">Main</div>
    <div class="text-sm text-base-content/60">Primary content area</div>
  </main>
  <!-- Aside -->
  <aside class="col-span-12 md:col-span-3 bg-base-200 rounded-box p-4">
    <div class="font-semibold text-sm mb-2">Aside</div>
    <div class="text-sm text-base-content/60">Sidebar</div>
  </aside>
  <!-- Footer -->
  <footer class="col-span-12 bg-neutral text-neutral-content rounded-box p-4 flex items-center">
    <span class="text-sm">Footer</span>
  </footer>
</div>

Requires: ux.min.css

<div class="grid grid-cols-12 gap-4" style="min-height: 300px;">
  <!-- Header: full width -->
  <header class="col-span-12 bg-neutral text-neutral-content rounded-box p-4 flex items-center">
    <span class="font-semibold">Header</span>
  </header>
  <!-- Nav: 2/12 on desktop, full on mobile -->
  <nav class="col-span-12 md:col-span-2 bg-base-200 rounded-box p-4">
    <div class="font-semibold text-sm mb-2">Nav</div>
    <div class="text-sm text-base-content/60">Links...</div>
  </nav>
  <!-- Main: 7/12 on desktop, full on mobile -->
  <main class="col-span-12 md:col-span-7 bg-base-200 rounded-box p-4">
    <div class="font-semibold mb-2">Main</div>
    <div class="text-sm text-base-content/60">Primary content area</div>
  </main>
  <!-- Aside: 3/12 on desktop, full on mobile -->
  <aside class="col-span-12 md:col-span-3 bg-base-200 rounded-box p-4">
    <div class="font-semibold text-sm mb-2">Aside</div>
    <div class="text-sm text-base-content/60">Sidebar</div>
  </aside>
  <!-- Footer: full width -->
  <footer class="col-span-12 bg-neutral text-neutral-content rounded-box p-4 flex items-center">
    <span class="text-sm">Footer</span>
  </footer>
</div>

Requires: tw.min.css

// No JavaScript required
// Classic "holy grail" layout with header, nav, main, aside, footer
// Uses 12-column grid with responsive col-span

Breakpoints

Prefix	Min Width	Example
(none)	0px	`grid-cols-1`
`sm:`	640px	`sm:grid-cols-2`
`md:`	768px	`md:grid-cols-3`
`lg:`	1024px	`lg:grid-cols-4`
`xl:`	1280px	`xl:grid-cols-6`

Available Classes

Class	Description
`.grid`	Set display to grid
`.grid-cols-{1-12}`	Set number of columns
`.grid-cols-none`	Remove column template
`.col-span-{1-12}`	Span across columns
`.col-span-full`	Span all columns
`.col-start-{1-13}`	Column start position
`.col-end-{1-13}`	Column end position
`.grid-rows-{1-6}`	Set number of rows
`.grid-rows-none`	Remove row template
`.row-span-{1-6}`	Span across rows
`.row-span-full`	Span all rows
`.row-start-{1-7}`	Row start position
`.row-end-{1-7}`	Row end position
`.grid-flow-row`	Auto-place by row
`.grid-flow-col`	Auto-place by column
`.grid-flow-dense`	Dense auto-placement
`.gap-{0-16}`	Gap between items
`.gap-x-{0-8}`	Column gap only
`.gap-y-{0-8}`	Row gap only
`.auto-cols-auto`	Auto column size: auto
`.auto-cols-fr`	Auto column size: 1fr
`.auto-rows-auto`	Auto row size: auto
`.auto-rows-fr`	Auto row size: 1fr
`.place-items-center`	Center items on both axes
`.place-content-center`	Center content on both axes
`.place-self-center`	Center individual item

Responsive variants

All column (grid-cols-*) and span (col-span-*) classes support responsive prefixes: sm:, md:, lg:, xl:. Example: grid-cols-1 md:grid-cols-3 lg:grid-cols-4