Grid Classes

Pre-built CSS Grid utility classes for defining grid templates, column/row spans, and auto-flow behavior.

Grid Template Columns

Define the number of columns in a grid container.

Class	Properties
.grid-cols-1	grid-template-columns: repeat(1, 1fr)
.grid-cols-2	grid-template-columns: repeat(2, 1fr)
.grid-cols-3	grid-template-columns: repeat(3, 1fr)
.grid-cols-4	grid-template-columns: repeat(4, 1fr)
.grid-cols-5	grid-template-columns: repeat(5, 1fr)
.grid-cols-6	grid-template-columns: repeat(6, 1fr)
.grid-cols-7	grid-template-columns: repeat(7, 1fr)
.grid-cols-8	grid-template-columns: repeat(8, 1fr)
.grid-cols-9	grid-template-columns: repeat(9, 1fr)
.grid-cols-10	grid-template-columns: repeat(10, 1fr)
.grid-cols-11	grid-template-columns: repeat(11, 1fr)
.grid-cols-12	grid-template-columns: repeat(12, 1fr)
.grid-cols-none	grid-template-columns: none

Column Span

Make an item span multiple columns.

Class	Properties
.col-span-1	grid-column: span 1 / span 1
.col-span-2	grid-column: span 2 / span 2
.col-span-3	grid-column: span 3 / span 3
.col-span-4	grid-column: span 4 / span 4
.col-span-5	grid-column: span 5 / span 5
.col-span-6	grid-column: span 6 / span 6
.col-span-7	grid-column: span 7 / span 7
.col-span-8	grid-column: span 8 / span 8
.col-span-9	grid-column: span 9 / span 9
.col-span-10	grid-column: span 10 / span 10
.col-span-11	grid-column: span 11 / span 11
.col-span-12	grid-column: span 12 / span 12
.col-span-full	grid-column: 1 / -1

Row Span

Make an item span multiple rows.

Class	Properties
.row-span-1	grid-row: span 1 / span 1
.row-span-2	grid-row: span 2 / span 2
.row-span-3	grid-row: span 3 / span 3
.row-span-4	grid-row: span 4 / span 4
.row-span-5	grid-row: span 5 / span 5
.row-span-6	grid-row: span 6 / span 6
.row-span-full	grid-row: 1 / -1

Grid Auto Flow

Control how auto-placed items flow into the grid.

Class	Properties
.grid-flow-row	grid-auto-flow: row
.grid-flow-col	grid-auto-flow: column
.grid-flow-dense	grid-auto-flow: dense
.grid-flow-row-dense	grid-auto-flow: row dense
.grid-flow-col-dense	grid-auto-flow: column dense

Basic Usage

<!-- 3-column grid -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-info-100 p-4">1</div>
  <div class="bg-info-100 p-4">2</div>
  <div class="bg-info-100 p-4">3</div>
</div>

<!-- Item spanning 2 columns -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-purple-100 p-4">Spans 2 columns</div>
  <div class="bg-purple-100 p-4">1 column</div>
  <div class="bg-purple-100 p-4">1 column</div>
</div>

<!-- Full-width item in a grid -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-full bg-warning-100 p-4">Full width</div>
  <div class="bg-warning-100 p-4">1</div>
  <div class="bg-warning-100 p-4">2</div>
  <div class="bg-warning-100 p-4">3</div>
</div>

SCSS Source

// From _utilities.scss — generate-grid-flex-classes()
@for $i from 1 through 12 {
  .grid-cols-#{$i} { grid-template-columns: repeat(#{$i}, 1fr); }
}
.grid-cols-none { grid-template-columns: none; }

@for $i from 1 through 12 {
  .col-span-#{$i} { grid-column: span #{$i} / span #{$i}; }
}
.col-span-full { grid-column: 1 / -1; }

@for $i from 1 through 6 {
  .row-span-#{$i} { grid-row: span #{$i} / span #{$i}; }
}
.row-span-full { grid-row: 1 / -1; }

TIP

For more advanced grid features (auto-fill/fit, subgrid, masonry, named areas), see the Grid Mixins documentation.