Using CSS Grid Alongside the Bootstrap 5 Flexbox Grid

How the Bootstrap 5 Flexbox Grid Works

Bootstrap 5’s grid is built entirely on flexbox. A .row sets display: flex; flex-wrap: wrap; and negative horizontal margins to compensate for gutter padding. Each .col-* child receives a flex shorthand that controls its width as a fraction of twelve columns. Responsive tiers (sm, md, lg, xl, xxl) map to the breakpoints defined in Bootstrap’s Sass map, which in Bootstrap 5.3 run from 576 px upward.

The gutter system uses --bs-gutter-x and --bs-gutter-y CSS custom properties, overridable at any level. That design reflects the one-dimensional nature of the system: each row is an independent flex container, so aligning items across multiple rows requires either manual height management or additional markup.

What CSS Grid Solves That Flexbox Cannot

CSS Grid landed in all major browsers by 2017 and has reached universal support well above 97% globally as of early 2025. The fundamental difference from flexbox is that it controls both rows and columns simultaneously from a single container rule.

Scenarios where CSS Grid clearly wins:

• Magazine or card layouts where a feature card must span two rows while smaller cards fill the adjacent column.
• Mosaic image galleries with irregular cell sizes that would require four levels of nested .row divs in Bootstrap.
• Named template areas that map directly to semantic regions (header, sidebar, main, footer) without any order dependency in the HTML.
• Overlapping layers placed at explicit grid coordinates, impossible with flex without resorting to absolute positioning.

None of these come for free in Bootstrap’s grid because flexbox cannot place items in two axes from a single container rule.

Using CSS Grid Inside a Bootstrap Column

The cleanest integration pattern is to keep Bootstrap’s grid for the macro layout (page skeleton, header, sidebar split, footer columns) and apply display: grid inside individual Bootstrap columns for component-level arrangements. From CSS Grid’s perspective, the outer Bootstrap column is just a block-level box, so there is no conflict.

<div class="container">
  <div class="row g-4">

    <!-- Standard Bootstrap column -->
    <div class="col-12 col-lg-4">
      <div class="sidebar-widget">...</div>
    </div>

    <!-- Bootstrap column containing a CSS Grid layout -->
    <div class="col-12 col-lg-8">
      <div class="feature-grid">
        <div class="feature-grid__hero">Main Feature</div>
        <div class="feature-grid__item">Item A</div>
        <div class="feature-grid__item">Item B</div>
        <div class="feature-grid__item">Item C</div>
      </div>
    </div>

  </div>
</div>

<style>
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--bs-gutter-x, 1.5rem);
}

.feature-grid__hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
</style>

The .feature-grid__hero card spans two columns and two rows simultaneously. Achieving the same visual in pure Bootstrap requires a nested row, an offset column, and careful height synchronisation. All of that breaks on resize without significant media query work.

Replacing Deep Bootstrap Nesting with CSS Grid

Heavily nested Bootstrap grids are a common source of rendering bugs and performance overhead. Each .row / .col pair adds DOM nodes and another round of flexbox recalculation. If you find yourself writing .row inside .col inside .row more than two levels deep, flattening the structure with CSS Grid is worth the effort.

<!-- Before: deeply nested Bootstrap -->
<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col-6">A</div>
      <div class="col-6">B</div>
    </div>
    <div class="row">
      <div class="col-12">C</div>
    </div>
  </div>
  <div class="col-4">D</div>
</div>

<!-- After: single CSS Grid container -->
<div class="content-grid">
  <div class="cg-a">A</div>
  <div class="cg-b">B</div>
  <div class="cg-c">C</div>
  <div class="cg-d">D</div>
</div>

<style>
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
}
.cg-a { grid-column: 1; grid-row: 1; }
.cg-b { grid-column: 1; grid-row: 1; / sub-grid or inline-flex / }
.cg-c { grid-column: 1; grid-row: 2; }
.cg-d { grid-column: 2; grid-row: 1 / 3; }
</style>

For genuine sub-grid needs (aligning inner tracks to the outer grid), the CSS subgrid keyword is now supported in Chrome 117+, Firefox 71+, and Safari 16+, making it viable for production in most audience profiles.

Canvas Template CSS Variables and Grid Integration

The Canvas HTML Template exposes spacing and colour tokens as CSS custom properties throughout its stylesheet. The primary theme colour is available as --cnvs-themecolor, and spacing follows Bootstrap’s own --bs-gutter-x convention. Reuse these tokens in your CSS Grid layouts and your custom grids will stay visually consistent with every other component on the page without any manual synchronisation.

<style>
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--bs-gutter-x, 1.5rem);
  container-type: inline-size; / enables container queries /
}

.portfolio-grid__item:hover {
  outline: 2px solid var(--cnvs-themecolor);
}
</style>

Pairing container-type: inline-size with CSS Grid is particularly powerful for card components. You can read more about that pattern in the post on container queries for reusable Bootstrap 5 card components.

When NOT to Replace the Bootstrap Grid with CSS Grid

CSS Grid is not always the right choice. Reach for Bootstrap’s flexbox grid when:

• You need responsive column classes without writing custom media queries. col-md-6 col-lg-4 is faster to maintain than equivalent grid breakpoint overrides.
• The layout is strictly one-dimensional: a row of equally sized cards, a nav bar, a button group.
• Your team is more familiar with Bootstrap conventions and the project has a short maintenance window.
• You are using a pre-built Canvas demo section and the component already uses .row / .col internally. Switching it to CSS Grid offers marginal gain while risking visual regressions.

Performance concerns about Bootstrap’s grid are generally overstated. The extra DOM nodes from .row / .col wrappers are negligible unless you are rendering thousands of repeated items. For critical rendering path concerns in Bootstrap projects, the techniques in Critical CSS for Bootstrap 5 Templates are a better starting point than rewriting the grid.

Responsive CSS Grid Without Media Queries

One of CSS Grid’s most underused features is intrinsic sizing: combining auto-fill or auto-fit with minmax() to create genuinely responsive layouts with zero media queries.

<style>
/* Cards reflow automatically: 1 column on mobile,
   3 on desktop, no @media required */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
</style>

<div class="auto-grid">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

The difference between auto-fill and auto-fit is worth understanding. auto-fill keeps empty tracks when there are fewer items than columns can fit. auto-fit collapses those empty tracks so items stretch to fill the available space. For card grids with variable item counts, auto-fit is almost always the correct choice.

Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.

If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.