<div class="grid grid--small">
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
</div>
{% if grid is not empty or block('grid_items') is not empty %}
{% set gridclass = "grid " ~ grid.variant %}
<div class="{{ gridclass }}">
{% block grid_items %}
{% for i in grid.items %}
{% include i.pattern with i.context %}
{% endfor %}
{% endblock %}
</div>
{% endif %}
{
"grid": {
"items": [
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
},
{
"pattern": "@placeholder"
}
],
"variant": "grid--small"
}
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: ($grid-gap / -2);
overflow: hidden;
> * {
flex-basis: $grid-min;
flex-grow: 1;
flex-shrink: 1;
width: 100%;
min-width: $grid-min;
margin: ($grid-gap / 2);
}
> .paragraph {
&:first-child,
&:last-child {
margin: ($grid-gap / 2);
}
}
@supports(display: grid) {
display: grid;
margin: 0;
grid-gap: $grid-gap;
grid-template-columns: repeat(auto-fit, minmax(#{$grid-min}, 1fr));
> * {
width: auto;
min-width: 0;
margin: 0;
}
> .paragraph {
&:first-child,
&:last-child {
margin: 0;
}
}
}
.span-two {
grid-column: span 2;
}
.span-three {
grid-column: span 3;
}
.span-four {
grid-column: span 4;
}
&.grid--small {
> * {
min-width: 10rem;
}
@supports(display: grid) {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
> * {
min-width: 0;
}
}
}
&.grid--medium {
> * {
min-width: 14rem;
@include rr-break-directive(l) {
max-width: 21%;
}
}
@supports(display: grid) {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
> * {
min-width: 0;
@include rr-break-directive(l) {
max-width: none;
}
}
}
}
&.grid--large {
> * {
min-width: 22rem;
box-sizing: border-box;
}
@supports(display: grid) {
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
> * {
min-width: 0;
}
}
}
&.grid--xlarge {
display: block;
margin-right: 0;
margin-left: 0;
> * {
//min-width: 100%;
margin: 0 0 2rem;
margin-right: 0;
margin-left: 0;
}
}
}
// Some special rules for grids in a narrowed content column
.with-sidebar__main {
$grid-min-against-sidebar: 18rem;
.grid.grid--wider-in-sidebar-main {
> * {
flex-basis: $grid-min-against-sidebar;
}
@supports(display: grid) {
grid-template-columns: repeat(auto-fit, minmax(#{$grid-min-against-sidebar}, 1fr));
}
}
}
// tweak teaser card meta styles when in the wide/single-col grid
.collection.collection--teaser-card .grid.grid--xlarge .teaser,
.grid.grid--xlarge .teaser.teaser--card {
.content-meta,
.event-meta {
.taxonomy {
display: flex;
&::before {
display: none;
}
}
&::after {
display: block;
margin-top: rr-gridbase(1);
}
}
}
// tweak meta styles in teasers when used in collection-grids in sidebar pages
.with-sidebar.with-sidebar--major-right {
.with-sidebar__main {
.collection-grid.collection-grid--major-left {
.grid.grid--xlarge {
.teaser {
.content-meta,
.event-meta {
display: block;
@include rr-font-compute(r, medium);
.taxonomy {
display: block;
&::before {
display: none;
}
}
}
}
}
}
}
}
Slab variant that allows multiple blocks to be aligned in equal-portion columns. The library has implemented 3 through 6 columns, although 4 is probably the rational maximum.