<div class="grid-container">
<div class="item1 inner">1) Col 1 row 1<br>
test<br>
test<br>
test</div>
<div class="item2 inner">2) Col 1 row 2</div>
<div class="item3 inner">3) Col 1 row 3<br>test<br>
test</div>
<div class="item4 inner">4) Col 2 row 1</div>
<div class="item5 inner">5) Col 2 row 2<br>test<br>test</div>
<div class="item6 inner">6) Col 2 row 3</div>
</div>
.grid-container {
display: grid;
grid-template-columns: minmax(100px, 50%) minmax(100px, 50%);
/* grid-template-rows:1fr 1fr 1fr;*/
grid-template-areas:
"grid1 grid2"
"grid3 grid4"
"grid5 grid6";
grid-gap: 10px;
background-color: #2196f3;
padding: 10px;
justify-content: center;
}
.grid-container > div {
text-align: center;
font-size: 30px;
}
.item1 {
grid-area: grid1;
}
.item2 {
grid-area: grid3;
}
.item3 {
grid-area: grid5;
}
.item4 {
grid-area: grid2;
}
.item5 {
grid-area: grid4;
}
.item6 {
grid-area: grid6;
}
.inner {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.