<div class="grid">
<div class="one">Item 1</div>
<div class="two">Item 2</div>
<div class="three">
<div>Nested one</div>
<div>Nested two</div>
</div>
<div class="four">Item 4</div>
</div>
body {
background-color: #E9E9E6;
font: 1.4em/1.3 Helvetica, Arial, sans-serif;
padding: 30px;
}
.grid {
display: grid;
border: 5px solid #CE454F;
border-radius: 10px;
inline-size: 500px;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.three {
display: contents;
}
.grid > * {
border: 5px solid #526683;
border-radius: 10px;
background-color: #89A4BE;
padding: 10px;
}
.three > div {
background-color: orange;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.