html,body,svg { height:100% }

by brigand

HTML

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

body {
  --cols: 3;
  --w: calc(100vw / var(--cols) + (4px / var(--cols)));
  --gap: 4px;
  background-image: linear-gradient(90deg, #878787 var(--gap), rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 100%);
  background-size: var(--w) 60px;
  background-position: calc(var(--gap) * -1) 0;
}

.grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(auto-fill, 1em);
  grid-gap: var(--gap);
}

.item {
  height: 1em;
  background: rgba(30, 190, 99, 0.3);
}

.item:nth-child(odd) {
  background: rgba(30, 99, 190, 0.3);
}