This chapter will discuss about Bootstrap CSS grid. Bootstrap”s default grid system, developed over a decade, has been widely used and proven effective. It was created without modern CSS features and techniques like the new CSS Grid we see in current browsers.

How it works

Bootstrap 5 introduces the ability to use a CSS Grid-based grid system with additional Bootstrap features for creating responsive layouts using different methods.

• Recompile your Sass after disabling the default grid system by setting $enable-grid-classes to false and enabling CSS Grid with $enable-cssgrid set to true.

• Replace instance of .row with .grid. The class .grid creates a grid-template by setting display: grid.

• Instead of using .col-* classes, use .g-col-* classes because CSS Grid columns use the grid-column property instead of width.

• Customize the column and gutter sizes of the parent .grid using CSS variables –bs-columns and –bs-gap.

Key differences

Let us see differences of CSS grid system when compared to the standard grid system as below:

• The impact of Flex utilities on CSS Grid columns is different.

• Instead of using gutters, use gap that act like margins and replace the horizontal padding in grid system.

• Grid gaps are automatically applied horizontally and vertically in. unlike .rows, .grids do not have negative margins and cannot use margin utilities to adjust the gutters. Refer to the customizing section.

• Modifier classes should be replaced with inline and custom styles (e.g., style=”–bs-columns: 3;” vs class=”row-cols-3″).

• Nesting requires resetting column counts for each nested .grid instance.

Three columns

Use .g-col-4 to create three equal-width columns for all devices. Modify the layout based on viewport size using responsive classes based on viewport size.