<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>
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item {
  width:var(--item-size);
  height:var(--item-size);
  border-radius: 100%;
  background: black;
}
.grid {
  --item-size: 50px;
  --gap: 1rem;
  --gap-half: calc(var(--gap) / 2);
  display: grid;
  margin:5rem;
  grid-template-columns:repeat(auto-fill,minmax(var(--item-size),1fr));
  gap:var(--gap);
  background: linear-gradient(to bottom, red, red 1px, transparent 1px, transparent);
  background-size: 100% calc(var(--item-size) + var(--gap));
  background-position: 0 calc(var(--item-size) + var(--gap-half));
}