<p> Replace the div with your component</p>
<h2>Tile Grid Small</h2>
<section class="tile-grid-sm">
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
</section>
<h2>Tile Grid Medium</h2>
<section class="tile-grid-md">
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
</section>
<p> Replace the div with your component</p>
<h2>Tile Grid Small</h2>
<section class="tile-grid-sm">
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
</section>
<h2>Tile Grid Medium</h2>
<section class="tile-grid-md">
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
<div class="grid-demo"></div>
</section>
/* No context defined. */
.tile-grid-sm {
display: grid;
grid-gap: $spacer-sm;
}
.tile-grid-md {
display: grid;
grid-gap: $spacer-sm;
}
@media screen and (min-width: $grid-breakpoint-sm) {
.tile-grid-sm {
grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
}
.tile-grid-md {
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
}
}
No notes defined.