Hello everyone good to see there’s a CSS community so it’s time to start trying to break stuff.

Basically I am a Grid novice who has the classic HTML grid example:

<div class="grid">

  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  ...
</div>

For which I’ve posted a codepen.

My problem is, I want to make it so that the number of columns adjusts as multiples of a given basis I want. Basically I’d expect this part to have worked:

div.grid.notworks {
  grid-template-columns: repeat(3n, 90px); /* :( */
}

(note the 3n, not 3; like in eg.: nth-child)

Such that the container will reflow itself to host 3, 6, 9, 12, … columns rather than 1, 2, 3, … (as it would be on flex) or only specifically 3, as it would be with (what I understand is) the normal repeat expression in div.grid.works.

Is this possible in CSS? If yes: teach me your CSS and Firefox secrets senpai. If not: is this planned / requested?

Tags in case this helps? I hear this is the trend in the fediverse. #css #grid-layout