Pattern Library

Grids

Grids are the basis of all layouts, and are important for creating responsive components that can be displayed on any device.

Grid structure

Most designs are based on a 12 column grid, which allows for a good level of layout flexibility. The example below is a flexbox grid with pre-generated classnames.

<div class="grid">
  <div class="grid__col12"><span class="your-content"></span></div>
</div>

<div class="grid">
  <div class="grid__col6"><span class="your-content"></span></div>
  <div class="grid__col6"><span class="your-content"></span></div>
</div>

<div class="grid">
  <div class="grid__col4"><span class="your-content"></span></div>
  <div class="grid__col4"><span class="your-content"></span></div>
  <div class="grid__col4"><span class="your-content"></span></div>
</div>

<div class="grid">
  <div class="grid__col3"><span class="your-content"></span></div>
  <div class="grid__col3"><span class="your-content"></span></div>
  <div class="grid__col3"><span class="your-content"></span></div>
  <div class="grid__col3"><span class="your-content"></span></div>
</div>

<div class="grid">
  <div class="grid__col2"><span class="your-content"></span></div>
  <div class="grid__col2"><span class="your-content"></span></div>
  <div class="grid__col2"><span class="your-content"></span></div>
  <div class="grid__col2"><span class="your-content"></span></div>
  <div class="grid__col2"><span class="your-content"></span></div>
  <div class="grid__col2"><span class="your-content"></span></div>
</div>

Semantic grids

It’s also acceptable to use mixins to apply grid widths through css. This allows for classes to be more semantic and gives finer control over grid widths for media queries. For example, a feature component can be styled to display feature-item children as 3 columns on desktop, 2 on tablet, and 1 on mobile.

.feature {
  @include grid();

  &-item {
    @include grid-col(4);

    @media($tablet) {
      @include grid-col(6);
    }

    @media($mobile) {
      @include grid-col(12);
    }
  }
}