Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

How it works

boodoo's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent .container.

Breaking it down, here's how it works:

• Containers provide a means to center and horizontally pad your site's contents.
• Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
• In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

Grid options

boodoo's grid system can adapt across all six default breakpoints.

Row columns

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content.

<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.

Sass mixins

When using boodoo's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts.

@use "sass:math";
@import "node_modules/boodoo/scss/functions";
@import "node_modules/boodoo/scss/variables";
@import "node_modules/boodoo/scss/mixins";

.custom-row {
  @include make-row();
}
.custom-col {
  @include media-breakpoint-up(sm) {
    @include make-col(4);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}