<div class="wrapper">
<div class="container top">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container center">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container bottom">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container stretch">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 500px;
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100px;
.item {
background: orange;
margin: 5px;
min-height: 20%;
}
&.top {
align-items: start;
}
&.center {
align-items: center;
}
&.bottom {
align-items: end;
}
&.stretch {
align-items: stretch;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.