There are no notes for this item.
<div class="columns">
<div>
<h2>A column</h2>
</div>
<hr />
<div>
<h2>Another column</h2>
</div>
</div>
///
/// The COLUMNS mixin makes it so that immmediate child elements appear as
/// columns. It assumes the use of < hr > elements to create visual gutters
/// that are only visible while displayed as columns.
///
@mixin columns() {
> hr {
border: 0;
display: none;
}
@include breakpoint(md) {
& {
display: table;
table-layout: fixed;
width: 100%;
> * {
display: table-cell;
vertical-align: top;
}
> hr {
display: table-cell;
width: 1rem;
}
}
}
}