Grid

Overview

Use grid utilities to control CSS Grid layout behavior. These utilities work with Bootstrap's CSS Grid layout system to manage column counts and auto-placement algorithms.

Column counts

Use grid-cols-{value} utilities to set the number of columns in a CSS Grid container by modifying the --bs-columns CSS variable. Bootstrap's CSS Grid system supports 3, 4, and 6 column layouts out of the box.

<div class="grid text-center grid-cols-3">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

<div class="grid text-center grid-cols-4">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

<div class="grid text-center grid-cols-6">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

These utilities set the --bs-columns CSS variable:

.grid-cols-3 {
  --bs-columns: 3;
}

.grid-cols-4 {
  --bs-columns: 4;
}

.grid-cols-6 {
  --bs-columns: 6;
}

Fill columns

Use grid-cols-fill to make a grid item span the entire width of the grid container by setting grid-column: 1 / -1.

<div class="grid text-center" style="--bs-columns: 4;">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div class="grid-cols-fill">Full width column</div>
  <div>Column</div>
  <div>Column</div>
</div>

<div class="grid" style="--bs-columns: 4;">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div class="grid-cols-fill">Full width column</div>
  <div>Column</div>
  <div>Column</div>
</div>

Auto flow

Control how auto-placed items are inserted into the grid with grid-auto-flow utilities.

Row (default)

Use grid-auto-flow-row to place items by filling each row in turn, adding new rows as necessary.

<div class="grid text-center grid-auto-flow-row" style="--bs-columns: 3;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Column

Use grid-auto-flow-column to place items by filling each column in turn, adding new columns as necessary.

<div class="grid text-center grid-auto-flow-column" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Dense

Use grid-auto-flow-dense to use the "dense" packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later.

<div class="grid text-center grid-auto-flow-dense" style="--bs-columns: 3;">
  <div class="g-col-2">Item 1 (spans 2)</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div class="g-col-2">Item 5 (spans 2)</div>
</div>

.grid-auto-flow-row {
  grid-auto-flow: row;
}

.grid-auto-flow-column {
  grid-auto-flow: column;
}

.grid-auto-flow-dense {
  grid-auto-flow: dense;
}

Responsive

All grid utilities are responsive and include all breakpoints.

Column counts

• .grid-cols-3
• .grid-cols-4
• .grid-cols-6
• .grid-cols-fill
• .grid-cols-sm-3
• .grid-cols-sm-4
• .grid-cols-sm-6
• .grid-cols-sm-fill
• .grid-cols-md-3
• .grid-cols-md-4
• .grid-cols-md-6
• .grid-cols-md-fill
• .grid-cols-lg-3
• .grid-cols-lg-4
• .grid-cols-lg-6
• .grid-cols-lg-fill
• .grid-cols-xl-3
• .grid-cols-xl-4
• .grid-cols-xl-6
• .grid-cols-xl-fill
• .grid-cols-2xl-3
• .grid-cols-2xl-4
• .grid-cols-2xl-6
• .grid-cols-2xl-fill

Auto flow

• .grid-auto-flow-row
• .grid-auto-flow-column
• .grid-auto-flow-dense
• .grid-auto-flow-sm-row
• .grid-auto-flow-sm-column
• .grid-auto-flow-sm-dense
• .grid-auto-flow-md-row
• .grid-auto-flow-md-column
• .grid-auto-flow-md-dense
• .grid-auto-flow-lg-row
• .grid-auto-flow-lg-column
• .grid-auto-flow-lg-dense
• .grid-auto-flow-xl-row
• .grid-auto-flow-xl-column
• .grid-auto-flow-xl-dense
• .grid-auto-flow-2xl-row
• .grid-auto-flow-2xl-column
• .grid-auto-flow-2xl-dense

CSS

Sass utilities API

Grid utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"grid-column-counts": (
  responsive: true,
  property: --#{$prefix}columns,
  class: grid-cols,
  values: (
    3,
    4,
    6
  )
),
"grid-columns": (
  responsive: true,
  property: grid-column,
  class: grid-cols,
  values: (
    fill: #{"1 / -1"},
  )
),
"grid-auto-flow": (
  responsive: true,
  property: grid-auto-flow,
  class: grid-auto-flow,
  values: row column dense
),