<div class="grid grid--three-columns">
<div class="grid__row">
<div class="grid__col grid__col--1">
<div class="grid__item">
<div class="placeholder placeholder--default">1</div>
</div>
</div>
<div class="grid__col grid__col--2">
<div class="grid__item">
<div class="placeholder placeholder--default">2</div>
</div>
</div>
<div class="grid__col grid__col--3">
<div class="grid__item">
<div class="placeholder placeholder--default">3</div>
</div>
</div>
</div>
</div>
#{tag || 'div'}.grid(class=variant && `grid--${variant}`)&attributes(attr)
if cols
.grid__row(class=verticalCentered && 'grid__row--vertical-centered')
each items, col in cols
.grid__col(class=`grid__col--${col}`)
each item in items
.grid__item
+include(`@${item.use}`, item.settings || {}, false)
{
"variant": "three-columns",
"cols": {
"1": [
{
"use": "placeholder",
"settings": {
"text": "1"
}
}
],
"2": [
{
"use": "placeholder",
"settings": {
"text": "2"
}
}
],
"3": [
{
"use": "placeholder",
"settings": {
"text": "3"
}
}
]
}
}
.grid__row {
display: flex;
flex-direction: column;
@include mq($from: m) {
align-items: stretch;
flex-direction: row;
margin-left: -2rem;
margin-right: -2rem;
}
}
.grid__row--vertical-centered {
@include mq($from: m) {
align-items: center;
}
}
.grid__col {
@include mq($until: m) {
&:not(:last-child) {
padding-bottom: 4rem;
}
}
@include mq($from: m) {
padding: 0 2rem;
}
}
.grid--two-columns .grid__col {
width: 100%;
@include mq($from: m) {
width: 50%;
}
}
.grid--three-columns .grid__col {
@include mq($from: m) {
width: 33.33333%;
}
}
.grid .placeholder {
padding: 3rem 0;
}
There are no notes for this item.