<section class="demo">
 <div class="grid">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
 </div>

 <div class="grid">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
  <div class="grid-item">Grid Item 3</div>
 </div>

 <div class="grid">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
  <div class="grid-item">Grid Item 3</div>
  <div class="grid-item">Grid Item 4</div>
  <div class="grid-item">Grid Item 5</div>
  <div class="grid-item">Grid Item 6</div>
 </div>

 <div class="grid">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
  <div class="grid-item">Grid Item 3</div>
  <div class="grid-item">Grid Item 4</div>
  <div class="grid-item">Grid Item 5</div>
  <div class="grid-item">Grid Item 6</div>
  <div class="grid-item">Grid Item 7</div>
  <div class="grid-item">Grid Item 8</div>
 </div>
</section>
body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather Sans', sans-serif;
}

.demo {
 margin: 2rem;

 > * + * {
  margin-top: 4rem;
 }
}

.grid {
  display: grid;
  grid-gap: 1rem;
}

.block {
  color: #fff;
  background-color: #dc143f;
  padding: 2rem;
  border-radius: 4px;
}

.grid:has(:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}

.grid:has(:nth-child(3):last-child) {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid:has(:nth-child(n+4)) {
  grid-template-columns: repeat(4, 1fr);
}

.grid-item {
 outline: 1px solid;
 padding: 1rem;
 background-color: lightblue;
 font-size: 24px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.