zfb
GitHub repository

Type to search...

to open search from anywhere

Grid

Define grid tracks and place items by row or column span and line.

Use grid-template utilities to define rows and columns, then place children by spanning tracks or choosing their start and end lines. Grid works well for two-dimensional layouts where both axes matter.

Quick reference

Example classExpected declarations
grid-cols-3grid-template-columns: repeat(3,minmax(0,1fr));
grid-rows-2grid-template-rows: repeat(2,minmax(0,1fr));
col-span-2grid-column: span 2 / span 2;
col-start-2grid-column-start: 2;
col-end-4grid-column-end: 4;
row-span-2grid-row: span 2 / span 2;
row-start-2grid-row-start: 2;
row-end-4grid-row-end: 4;
grid-cols-[7rem_1fr]grid-template-columns: 7rem 1fr;
grid-rows-[auto_1fr]grid-template-rows: auto 1fr;
col-start-autogrid-column-start: auto;
row-end-autogrid-row-end: auto;
Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Define columns and rows

grid-cols-3 creates three equal columns and grid-rows-2 creates two equal rows for automatic placement.

Define columns and rows
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Template utilities create explicit tracks for automatic placement.</p>
  <div class="wind-demo-frame grid grid-cols-3 grid-rows-2 gap-2">
    <div class="wind-demo-tile">1</div><div class="wind-demo-tile">2</div><div class="wind-demo-tile">3</div>
    <div class="wind-demo-tile">4</div><div class="wind-demo-tile">5</div><div class="wind-demo-tile">6</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2,minmax(0,1fr));
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "gap-2",
        "grid",
        "grid-cols-3",
        "grid-rows-2"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Place items on grid lines

col-span-2 and row-span-2 cover multiple tracks; start and end utilities place items against numbered lines. auto returns placement to automatic flow.

Place items on grid lines
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Column and row lines place or span items across the explicit tracks.</p>
  <div class="wind-demo-frame grid grid-cols-4 grid-rows-4 gap-2">
    <div class="wind-demo-tile col-span-2 row-start-1 row-end-2">Span two columns</div>
    <div class="wind-demo-tile wind-demo-alt col-start-3 col-end-5 row-start-1 row-span-2">Start/end lines; span two rows</div>
    <div class="wind-demo-tile col-start-1 col-end-3 row-start-2 row-end-4">Rows 2–4</div>
    <div class="wind-demo-tile wind-demo-alt col-start-3 col-end-5 row-start-3 row-end-4">Placed at line 3</div>
    <div class="wind-demo-tile col-start-2 col-end-4 row-start-4 row-end-5">Column lines 2–4</div>
    <div class="wind-demo-tile col-start-auto row-end-auto">Auto placement</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.grid {
  display: grid;
}
.col-end-3 {
  grid-column-end: 3;
}
.col-end-4 {
  grid-column-end: 4;
}
.col-end-5 {
  grid-column-end: 5;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-3 {
  grid-column-start: 3;
}
.col-start-auto {
  grid-column-start: auto;
}
.grid-cols-4 {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.grid-rows-4 {
  grid-template-rows: repeat(4,minmax(0,1fr));
}
.row-end-2 {
  grid-row-end: 2;
}
.row-end-4 {
  grid-row-end: 4;
}
.row-end-5 {
  grid-row-end: 5;
}
.row-end-auto {
  grid-row-end: auto;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.row-start-2 {
  grid-row-start: 2;
}
.row-start-3 {
  grid-row-start: 3;
}
.row-start-4 {
  grid-row-start: 4;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "col-end-3",
        "col-end-4",
        "col-end-5",
        "col-span-2",
        "col-start-1",
        "col-start-2",
        "col-start-3",
        "col-start-auto",
        "gap-2",
        "grid",
        "grid-cols-4",
        "grid-rows-4",
        "row-end-2",
        "row-end-4",
        "row-end-5",
        "row-end-auto",
        "row-span-2",
        "row-start-1",
        "row-start-2",
        "row-start-3",
        "row-start-4"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Mix fixed and flexible tracks

The arbitrary values define a 7rem column beside a flexible track and an automatic row beside a flexible row.

Mix fixed and flexible tracks
HTML
<div class="wind-demo">
  <div class="wind-demo-note">An arbitrary track list is written with underscores for spaces.</div>
  <div class="wind-demo-frame grid grid-cols-[7rem_1fr] grid-rows-[auto_1fr] gap-2">
    <div class="wind-demo-tile">Fixed track</div><div class="wind-demo-tile">Flexible track</div>
    <div class="wind-demo-tile">Second row</div><div class="wind-demo-tile">Remaining width</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-\[7rem_1fr\] {
  grid-template-columns: 7rem 1fr;
}
.grid-rows-\[auto_1fr\] {
  grid-template-rows: auto 1fr;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "gap-2",
        "grid",
        "grid-cols-[7rem_1fr]",
        "grid-rows-[auto_1fr]"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Custom and named values

grid-cols-N and grid-rows-N accept integers from 1 through 12; none and subgrid are also supported. col-span-N and row-span-N accept 1 through 12, while start/end line numbers accept 1 through 13 and auto. span-full maps to 1 / -1. Template utilities also accept arbitrary CSS track lists; encode spaces with underscores, for example grid-cols-[7rem_1fr].

Related guides: Utility grammar · Variants

Catalog details

col-end

FieldValue
Catalog identifierv1.col-end
Class patterncol-end-<suffix>
Grammar{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-column-end

Accepted values

KindSuffixEmitted value
keyword"auto""auto"

Declaration templates

PropertyValue kindFixed value
grid-column-endresolvednull

Catalog examples

Example classExpected declarations
col-end-autogrid-column-end: auto

col-span

FieldValue
Catalog identifierv1.col-span
Class patterncol-span-<suffix>
Grammar{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-column

Accepted values

KindSuffixEmitted value
keyword"full""1 / -1"

Declaration templates

PropertyValue kindFixed value
grid-columnresolvednull

Catalog examples

Example classExpected declarations
col-span-fullgrid-column: 1 / -1

col-start

FieldValue
Catalog identifierv1.col-start
Class patterncol-start-<suffix>
Grammar{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-column-start

Accepted values

KindSuffixEmitted value
keyword"auto""auto"

Declaration templates

PropertyValue kindFixed value
grid-column-startresolvednull

Catalog examples

Example classExpected declarations
col-start-autogrid-column-start: auto

grid-cols

FieldValue
Catalog identifierv1.grid-cols
Class patterngrid-cols-<suffix>
Grammar{"acceptedKinds":["keyword","integer","arbitrary"],"arbitraryProperty":"grid-template-columns","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-template-columns

Accepted values

KindSuffixEmitted value
keyword"none""none"
keyword"subgrid""subgrid"

Declaration templates

PropertyValue kindFixed value
grid-template-columnsresolvednull

Catalog examples

Example classExpected declarations
grid-cols-nonegrid-template-columns: none

grid-rows

FieldValue
Catalog identifierv1.grid-rows
Class patterngrid-rows-<suffix>
Grammar{"acceptedKinds":["keyword","integer","arbitrary"],"arbitraryProperty":"grid-template-rows","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values2
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-template-rows

Accepted values

KindSuffixEmitted value
keyword"none""none"
keyword"subgrid""subgrid"

Declaration templates

PropertyValue kindFixed value
grid-template-rowsresolvednull

Catalog examples

Example classExpected declarations
grid-rows-nonegrid-template-rows: none

row-end

FieldValue
Catalog identifierv1.row-end
Class patternrow-end-<suffix>
Grammar{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-row-end

Accepted values

KindSuffixEmitted value
keyword"auto""auto"

Declaration templates

PropertyValue kindFixed value
grid-row-endresolvednull

Catalog examples

Example classExpected declarations
row-end-autogrid-row-end: auto

row-span

FieldValue
Catalog identifierv1.row-span
Class patternrow-span-<suffix>
Grammar{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-row

Accepted values

KindSuffixEmitted value
keyword"full""1 / -1"

Declaration templates

PropertyValue kindFixed value
grid-rowresolvednull

Catalog examples

Example classExpected declarations
row-span-fullgrid-row: 1 / -1

row-start

FieldValue
Catalog identifierv1.row-start
Class patternrow-start-<suffix>
Grammar{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and rankgrid (6)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesgrid-row-start

Accepted values

KindSuffixEmitted value
keyword"auto""auto"

Declaration templates

PropertyValue kindFixed value
grid-row-startresolvednull

Catalog examples

Example classExpected declarations
row-start-autogrid-row-start: auto

Revision History

CreatedUpdated