Make A CSS Grid With An Arbitrary Number Of Columns

October 2024

This is how I'm making the grid do the thing

HTML

<div class="example-wrapper">
  <div>alfa</div>
  <div>bravo</div>
  <div>charlie</div>
  <div>delta</div>
</div>

Output

alfa

bravo

charlie

delta

CSS

.example-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.example-wrapper div {
  background-color: var(--bw-reverse-40);
}

end of line