There are no notes for this item.
<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.
///
/// @param {direction} $align [stretch] - align-items property
/// @param {number} $columns [3] - number of columns while min-width is $large
/// @param {direction} $flow [row wrap] - number of columns while min-width is $large
/// @param {measure} $gutter [1rem] - gutter between grid items
/// @param {direction} $justify [flex-start] - justify-content property
///
@mixin grid($columns: 3, $gutter: 2rem, $vertical-gutter: null, $element: item) {
@if $vertical-gutter == null {
$vertical-gutter: $gutter;
}
display: flex;
flex-wrap: wrap;
&__#{$element} {
width: calc(#{100%/$columns} - #{$gutter * ($columns - 1) / $columns});
margin-bottom: $vertical-gutter;
&:nth-child(n) {
margin-left: 0;
}
&:not(:nth-child(#{$columns}n + 1)) {
margin-left: $gutter;
}
}
}