_grid-item.scss

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

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

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

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

grid.html

<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>

grid.scss

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

.grid-wrap {
  padding: $gridGap;
}

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

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

@import "grid-item";