The grid utility is just a quicker way to use candlepin to add a column at each breakpoint (md, lg, xl). For example, @include grid(5) would start content as two columns, add a third at the md breakpoint, a fourth at lg, and a fifth at xl.
<div class=" grid">
<div class="grid__item">
<p><strong>Cell 1</strong> Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur.</p>
</div>
<div class="grid__item">
<p><strong>Cell 2</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, impedit!</p>
</div>
<div class="grid__item">
<p><strong>Cell 3</strong> Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</p>
</div>
<div class="grid__item">
<p><strong>Cell 4</strong> Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur.</p>
</div>
<div class="grid__item">
<p><strong>Cell 5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, impedit!</p>
</div>
</div>
///
/// GRID allows for the creation of a column-based grid
/// that can wrap or nowrap. It is lighter than FEATURES or TILES
/// in that it contains no default styling on its contents.
///
/// If you want to just change the suffix for $element, you can do this:
///
/// @include grid($element: "#{&}__tile");
///
/// Or you can override and pass in a completely different class:
///
/// @include grid($element: "& .i-will-be-nested");
///
/// @include grid($element: ".i-will-be-at-the-root-level");
///
/// @param {number} $columns [3] - number of columns
/// @param {measure} $gutter [1rem] - gutter between grid items
/// @param {measure} $vertical-gutter [null] - vertical gutter between grid items
/// @param {string} $element [&__item] - classname for grid items
///
@import "candlepin";
@mixin grid($max-columns: 4, $gutter: $gutter, $vertical-gutter: $gutter, $element: "#{&}__item") {
display: flex;
flex-wrap: wrap;
@at-root #{$element} {
flex-grow: 1;
margin-bottom: $vertical-gutter;
@include at(md) {
@include wrap(1, $max-columns - 2, $gutter);
flex-grow: 0;
}
@include at(lg) {
@include wrap(1, $max-columns - 1, $gutter);
}
@include at(xl) {
@include wrap(1, $max-columns, $gutter);
}
}
}
.grid {
@include grid;
}