<div class="grid">
<div>Content</div>
<div class="full">Full width</div>
<div>Content</div>
</div>
.grid {
display: grid;
grid-gap: 20px;
grid-auto-rows: 150px;
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 40em) [main-end]
minmax(1em, 1fr) [full-end];
}
.grid > * {
grid-column: main-start ;
}
.grid > .full {
grid-column: full-start / full-end;
}
.grid > div {
background-color: rgb(144, 122, 214);
font-weight: bold;
font-family: Baloo, sans-serif;
font-size: 2.157rem;
padding: 10px;
border-radius: 5px;
}
.grid > div:nth-child(odd) {
background-color: rgb(218, 191, 255);
}
This Pen doesn't use any external JavaScript resources.