Atomic Bulldog - UI/pattern library

4.2 - Grid

Source: layouts/_grid.scss, line 91

Open in new window

Atomic Bulldog uses CSS grid layout for its grid. It only applies this grid to supported browsers using the CSS @supports rule.

See Grid fallback if you need to use the fallback grid.

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Can I Use css-supports-api? Data on support for the css-supports-api feature across the major browsers from caniuse.com.

The grid is by default 12 columns base, This grid is two dimensional, meaning grid items can grow in the horizontal axis (has-col-{breakpoint}-{size}) and on the vertical axis (has-row-{breakpoint}-{size}).

{breakpoint} is set from the $breakpoints map (see variables), {size} is set as well in variables. It goes from 0 to 12 ($grid-columns) by default or 0 up to 12 base on the number of columns set using .has-cols-{bp}-{size}

Example:

1
2
3
4
5
6
<div class="grid has-grid-gap-2 has-cols-3 has-cols-md-5 has-cols-lg-7">
  <div class="has-col-md-3 has-col-lg-1 has-row-md-2 has-row-lg-2">
    <div class="kss-box">1</div>
  </div>
  <div class="has-col-3 has-col-md-2 has-col-lg-1">
      <div class="kss-box">2</div>
  </div>
  <div>
      <div class="kss-box">3</div>
  </div>
  <div class="has-col-md-2 has-col-lg-3">
      <div class="kss-box">4</div>
  </div>
  <div class="has-col-md-2 has-col-lg-6">
      <div class="kss-box">5</div>
  </div>
  <div>
      <div class="kss-box">6</div>
  </div>
</div>