CSS

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