<div class="dash-grid">
<div class="card grid-item-size-l">
<h2>Dash grid item 1</h2>
<p>Adipisicing natus consectetur nesciunt sit nostrum? Laudantium accusantium ducimus earum explicabo dolorem Adipisci similique doloribus blanditiis fugiat praesentium. Earum vero vitae explicabo laborum suscipit molestias! Nobis accusantium deserunt vel sed?</p>
</div>
<div class="card ">
<h2>Dash grid item 2</h2>
<p>Ipsum alias et sed mollitia magnam et? Aut in dolore molestias minus lorem numquam Delectus nemo magnam praesentium reprehenderit iusto At nulla officia exercitationem impedit atque quo adipisci Iure unde</p>
</div>
<div class="card ">
<h2>Dash grid item 3</h2>
<p>Consectetur consequuntur at porro hic molestias exercitationem distinctio. Praesentium atque in numquam consectetur consequatur, id Provident consequatur molestiae expedita optio ut facere. Consequuntur necessitatibus dolorum harum nulla molestias Similique aperiam</p>
</div>
<div class="card ">
<h2>Dash grid item 4</h2>
<p>Lorem voluptates consectetur excepturi voluptate culpa. Minus laborum deserunt magnam molestiae itaque accusamus Dolore neque aperiam libero debitis nemo Odio explicabo ullam id iusto quae laborum Consequatur voluptates velit corporis!</p>
</div>
</div>
<div class="dash-grid">
{{#> @partial-block}}
{{#each grid-items}}
{{#> @card}}
<h2>{{title}}</h2>
<p>{{content}}</p>
{{/ @card}}
{{/each}}
{{/ @partial-block}}
</div>
{
"grid-items": [
{
"title": "Dash grid item 1",
"modifier": "grid-item-size-l",
"content": "Adipisicing natus consectetur nesciunt sit nostrum? Laudantium accusantium ducimus earum explicabo dolorem Adipisci similique doloribus blanditiis fugiat praesentium. Earum vero vitae explicabo laborum suscipit molestias! Nobis accusantium deserunt vel sed?"
},
{
"title": "Dash grid item 2",
"content": "Ipsum alias et sed mollitia magnam et? Aut in dolore molestias minus lorem numquam Delectus nemo magnam praesentium reprehenderit iusto At nulla officia exercitationem impedit atque quo adipisci Iure unde"
},
{
"title": "Dash grid item 3",
"content": "Consectetur consequuntur at porro hic molestias exercitationem distinctio. Praesentium atque in numquam consectetur consequatur, id Provident consequatur molestiae expedita optio ut facere. Consequuntur necessitatibus dolorum harum nulla molestias Similique aperiam"
},
{
"title": "Dash grid item 4",
"content": "Lorem voluptates consectetur excepturi voluptate culpa. Minus laborum deserunt magnam molestiae itaque accusamus Dolore neque aperiam libero debitis nemo Odio explicabo ullam id iusto quae laborum Consequatur voluptates velit corporis!"
}
]
}
/**
* Dash grid
*/
@media screen {
@supports (display: grid) {
.dash-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
grid-gap: 1rem;
align-items: start;
}
.dash-grid > * {
margin-top: 0;
}
@media (min-width: 40rem) {
.grid-item-size-l {
grid-column: span 2;
grid-row: span 2;
}
.grid-item-size-l-wide {
grid-column: span 2;
}
}
}
}
Used to lay out cards and other components in a grid for dashboard type pages.
In addition to the default size (1x1), there’s a number of additional sizes supported.
.grid-item-size-l spans 2 columns and 2 rows.grid-item-size-l-wide spans 2 columns and 1 row