Grid

Overview

Use grid utilities to control CSS Grid layout behavior. These utilities work with Modus 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
• .sm:grid-cols-3
• .sm:grid-cols-4
• .sm:grid-cols-6
• .sm:grid-cols-fill
• .md:grid-cols-3
• .md:grid-cols-4
• .md:grid-cols-6
• .md:grid-cols-fill
• .lg:grid-cols-3
• .lg:grid-cols-4
• .lg:grid-cols-6
• .lg:grid-cols-fill
• .xl:grid-cols-3
• .xl:grid-cols-4
• .xl:grid-cols-6
• .xl:grid-cols-fill
• .2xl:grid-cols-3
• .2xl:grid-cols-4
• .2xl:grid-cols-6
• .2xl:grid-cols-fill

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: --#{$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
),