<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container1 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: repeat(2, 1fr);
}
.item {
/* width: 100px; */
height: 50px;
background-color: #f1e4e4;
border: 1px solid #777777;
}
.container2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"left top top"
"left main hi";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.