<main class="flex-grid-wrap">

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

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

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

  <div class="flex-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: 12rem;
$gridGap: 2rem;

* {
  box-sizing: border-box;
}

.flex-grid-wrap {
  padding: $gridGap;
}

.flex-grid {
  display: flex;

  & > * {
    flex: 0 1 100%;

    &:not(:first-child) {
      margin-left: $gridGap;
    }
  }

  @media (max-width: ($minColWidth * 3)) {
    flex-wrap: wrap;

    & > * {
      margin: 2rem 0 0 !important;
    }
  }

  @media (min-width: ($minColWidth * 3)) {
    & + .flex-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;
}