The stack mixin and class create a simple, single cell grid where all child divs are placed within the same cell. The benefit is that all of these stacked divs will have the same height and width. Unlike doing the same by absolutely positioning divs on top of one another, the total height/width of these divs respects the width/height of the content of all the divs. This makes it a great technicque for stacking content on top of images or videos, as even if the content reflows to be taller than the background image or video, the background image will be enlarged and cropped.
<div class="stack">
<div>
<img class="stack__cover" src="https://placeimg.com/960/480/tech/sepia" alt="">
</div>
<div>
<p style="color: blue; font-size: 1.5rem; padding: 1.5rem">
Consectetur natus assumenda placeat rerum ex? Labore ipsum quia totam numquam dolorum Nostrum enim facere possimus cupiditate quibusdam fugit. Beatae repellat ea eaque sapiente et, magnam deleniti! Fuga laudantium excepturi
</p>
</div>
</div>
@mixin stack {
display: grid;
grid-template-areas: "stack";
> * {
grid-area: stack;
}
&__cover {
height: 100%;
object-fit: cover;
width: 100%;
}
}
.stack {
@include stack;
}