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>
        

Subgrid

Use grid-cols-subgrid to have a nested .grid adopt the column tracks of its parent grid, instead of generating its own evenly divided columns, by setting grid-template-columns: subgrid.

In the example below, the parent grid’s three columns are unevenly sized (2fr 1fr 1fr). The nested grid in the last row uses grid-cols-subgrid to line up with those same column tracks rather than splitting into three equal columns of its own.

<div class="grid text-center" style="grid-template-columns: 2fr 1fr 1fr;">
  <div>Column (2fr)</div>
  <div>Column (1fr)</div>
  <div>Column (1fr)</div>
  <div class="grid grid-cols-subgrid" style="grid-column: 1 / -1;">
    <div>Subgrid column (2fr)</div>
    <div>Subgrid column (1fr)</div>
    <div>Subgrid column (1fr)</div>
  </div>
</div>

          .grid-cols-subgrid {
  grid-template-columns: subgrid;
}
        

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-subgrid
• .sm:grid-cols-3
• .sm:grid-cols-4
• .sm:grid-cols-6
• .sm:grid-cols-fill
• .sm:grid-cols-subgrid
• .md:grid-cols-3
• .md:grid-cols-4
• .md:grid-cols-6
• .md:grid-cols-fill
• .md:grid-cols-subgrid
• .lg:grid-cols-3
• .lg:grid-cols-4
• .lg:grid-cols-6
• .lg:grid-cols-fill
• .lg:grid-cols-subgrid
• .xl:grid-cols-3
• .xl:grid-cols-4
• .xl:grid-cols-6
• .xl:grid-cols-fill
• .xl:grid-cols-subgrid
• .2xl:grid-cols-3
• .2xl:grid-cols-4
• .2xl:grid-cols-6
• .2xl:grid-cols-fill
• .2xl:grid-cols-subgrid

Auto flow

• .grid-auto-flow-row
• .grid-auto-flow-column
• .grid-auto-flow-dense
• .sm:grid-auto-flow-row
• .sm:grid-auto-flow-column
• .sm:grid-auto-flow-dense
• .md:grid-auto-flow-row
• .md:grid-auto-flow-column
• .md:grid-auto-flow-dense
• .lg:grid-auto-flow-row
• .lg:grid-auto-flow-column
• .lg:grid-auto-flow-dense
• .xl:grid-auto-flow-row
• .xl:grid-auto-flow-column
• .xl:grid-auto-flow-dense
• .2xl:grid-auto-flow-row
• .2xl:grid-auto-flow-column
• .2xl:grid-auto-flow-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: grid-template-columns,
  class: grid-cols,
  values: (
    "1": 1fr,
    "2": repeat(2, 1fr),
    "3": repeat(3, 1fr),
    "4": repeat(4, 1fr),
    "6": repeat(6, 1fr),
    subgrid: subgrid,
  )
),
"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
),