Bootstrap 5Layout

Bootstrap 5 CSS Grid

Bootstrap 5's CSS Grid system is an opt-in alternative to the standard flexbox-based grid, enabling two-dimensional layouts using native CSS Grid under the hood. It is activated by setting `display: grid` on a container with the `.grid` class and placing children using `g-col-*` utilities. Use it when you need precise row and column spanning, overlapping elements, or layouts that flexbox handles awkwardly.

Primary Class

.css-grid

Common Use Cases

→Building a magazine-style editorial layout where the lead article spans two columns and the sidebar spans three rows alongside it
→Creating a pricing page where the featured plan card visually breaks the row by spanning an extra column and using a different row height
→Designing a dashboard with metric cards of varying widths — revenue card spans 8 columns, two KPI cards each span 2 — without nesting extra wrapper divs
→Constructing a photo gallery with a hero image that spans both columns and rows while smaller thumbnails fill the remaining cells automatically

Variants & Classes

Variant	Description	Classes
CSS Grid Default	Standard css grid with Bootstrap's default styling.	`css-grid`
CSS Grid Responsive	Responsive variant that adapts to different screen sizes.	`css-grid css-grid-responsive`

Code Example

<div class="grid" style="--bs-columns: 12; --bs-gap: 1.5rem;">
  <!-- Full-width page header -->
  <div class="g-col-12">
    <h1 class="mb-0">Product Catalogue</h1>
  </div>

  <!-- Sidebar: 3 columns wide -->
  <aside class="g-col-12 g-col-md-3 p-3 bg-light rounded">
    <h5>Filter by Category</h5>
    <ul class="list-unstyled mb-0">
      <li><a href="#">Running Shoes</a></li>
      <li><a href="#">Trail Boots</a></li>
      <li><a href="#">Sandals</a></li>
    </ul>
  </aside>

  <!-- Main content: spans remaining 9 columns -->
  <section class="g-col-12 g-col-md-9">
    <div class="grid" style="--bs-columns: 3; --bs-gap: 1rem;">
      <div class="g-col-1 card p-3">Trail Runner X2</div>
      <div class="g-col-1 card p-3">Summit Boot Pro</div>
      <div class="g-col-1 card p-3">Coastal Sandal</div>
    </div>
  </section>

  <!-- Full-width footer strip -->
  <footer class="g-col-12 text-muted small pt-2 border-top">
    Showing 3 of 24 products
  </footer>
</div>

Live Examples

Basic CSS Grid

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated css grid with custom colours
✓CSS Grid with interactive states
✓Responsive css grid for all screen sizes

Best Practices

Override column count with a CSS variable, not a new class

Bootstrap's CSS Grid uses the `--bs-columns` custom property, so you can change the grid from 12 to 6 columns by adding `style="--bs-columns: 6"` inline or in a scoped CSS rule — no extra utility classes needed.

Use `g-start-*` to force a column start position

Apply `g-start-4` to make an element begin at column line 4 regardless of what precedes it — essential for pinning a sidebar to the right or creating deliberate whitespace gaps in an editorial layout.

Nest `.grid` containers for independent sub-grids

Place a second `.grid` div inside a `g-col-*` cell and set its own `--bs-columns` value; the child grid is completely independent, so a 9-column main area can host a 3-column product card row without inheriting the parent's column count.

Combine with responsive `g-col-{breakpoint}-*` classes

Stack everything to full-width on mobile with `g-col-12`, then apply `g-col-md-4` for tablet and `g-col-lg-3` for desktop — the same responsive breakpoint tokens from the flex grid work identically here.

FAQ

What is the difference between Bootstrap 5's `.grid` CSS Grid system and its classic `.row`/`.col-*` flexbox grid?

The classic `.row`/`.col-*` system uses flexbox and wraps columns automatically. Bootstrap 5's `.grid` system uses native `display: grid` and `grid-template-columns`, which means elements can span rows as well as columns, you can create overlapping cells, and the gap is controlled uniformly by `--bs-gap` rather than separate gutter padding on each column. The CSS Grid approach requires fewer wrapper divs for complex two-dimensional layouts but is opt-in so it does not affect existing projects.

How do I make a grid item span multiple rows in Bootstrap 5's CSS Grid?

Bootstrap 5 does not ship row-span utilities out of the box, so you add them yourself with a small CSS rule: `.g-row-span-2 { grid-row: span 2; }`. Apply that class to the element you want to stretch across two rows. Because Bootstrap's `.grid` uses native CSS Grid, standard `grid-row`, `grid-column`, and `grid-area` properties all work without workarounds.

How does Canvas Builder handle CSS Grid layouts when generating a page?

Canvas Builder detects layout patterns in your prompt — phrases like 'sidebar with content', 'asymmetric columns', or 'spanning hero card' — and emits the appropriate `.grid` container with computed `--bs-columns` and `g-col-*` classes rather than defaulting to nested `.row` divs. Brand colours from your palette are applied via CSS custom properties on the grid cells, and all output is fully responsive with stacked mobile breakpoints already written in, so the generated code is production-ready without manual media-query editing.