<div class="grid-wrapper">
<div class="elem elem1"><h2>Element 1</h2></div>
<div class="elem elem2"><h2>Element 2</h2></div>
<div class="elem elem3">
<h2>Element 3</h2>
<p>Element 3 paragraph 1</p>
<p>Element 3 paragraph 2</p>
</div>
</div>
.grid-wrapper {
display: grid;
grid-template-columns: 2fr 1fr 4fr;
gap: 30px;
}
.elem1 {
grid-column: 1;
grid-row: 1;
}
.elem2 {
grid-column: 2 / 4;
grid-row: 1;
}
.elem3 {
grid-column: 1 / -1;
grid-row: 2;
display: grid;
grid-template-columns: subgrid;
}
body {
margin: 30px;
padding: 0;
}
.elem {
background-color: pink;
border-radius: 6px;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.