<section class="grid-container">
<div></div>
<div></div>
<div></div>
<div class="full-width"></div>
<div></div>
<div></div>
<div></div>
</section>
.grid-container {
background: wheat;
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: 200px auto 200px;
grid-column-gap: 20px;
grid-template-rows: 100px 300px 100px;
grid-row-gap: 20px;
}
section div {
width: 100%;
background: teal;
margin-bottom: 10px;
}
.full-width {
grid-column: 1 / -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.