<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.