<main class="grid-wrap">

  <div class="grid">
    <span>One column default</span>
  </div>

  <div class="grid">
    <span>Half column 1</span>
    <span>Half column 2</span>
  </div>

  <div class="grid">
    <span>3-col 1</span>
    <span>3-col 2</span>
    <span>3-col 3</span>
  </div>

  <div class="grid">
    <span>4-col 1</span>
    <span>4-col 2</span>
    <span>4-col 3</span>
    <span>4-col 4</span>
  </div>

</main>

// Learn more about this technique:
// @link https://moderncss.dev/solutions-to-replace-the-12-column-grid/

$minColWidth: 15rem;
$gridGap: 2rem;

* {
  box-sizing: border-box;
}

.grid-wrap {
  padding: $gridGap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  grid-gap: 2rem;

  & + .grid {
    margin-top: $gridGap;
  }
}

body {
  min-height: 100vh;
  font-family: "Baloo 2", sans-serif;
}

span {
  border: 2px dashed currentcolor;
  border-radius: 4px;
  min-height: 15vh;
  padding: 1rem;
  color: #0178d4;
  font-size: 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div:nth-child(2) span {
  color: purple;
}

div:nth-child(3) span {
  color: green;
}

div:nth-child(4) span {
  color: orangered;
}