CSS

667 readers

2 users here now

founded 2 years ago

MODERATORS

Ategon@programming.dev

CSS grid: template columns on multiples? (lemmy.dbzer0.com)

submitted 3 months ago by veniasilente@lemmy.dbzer0.com to c/css@programming.dev

3 comments fedilink hide all child comments

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

top 3 comments

sorted by: hot top controversial new old

[–] mmmm@sopuli.xyz 3 points 3 months ago (1 children)

To my humble knowledge it's not possible to do it with css grid alone, as in the current state of the spec concerns, though I'd like to be proven wrong so I'm leaving this comment to potentially trigger a Cunningham's law situation.

I suppose you have some alternatives still:

Some JS trickery;
Setting several media queries for div.grid.works to set its width in multiples of 90px * n;
Use a CSS preprocessor (SCSS, LESS...) to define a function that allows the 3n * 90px thing;
If browser support is not important for you, I guess you could play with @function

[–] veniasilente@lemmy.dbzer0.com 2 points 3 months ago (1 children)

Setting several media queries for div.grid.works to set its width in multiples of 90px * n;

Just to check: wouldn't that have to be container queries? Media queries IIRC can only tell me the size of the browser viewport, but not how much screen state is lost to eg.: toolbars, floats, other containers, margins, etc... so that could easily lead to container overflow.

All that said, I hope this is implemented soon (would love to know how to make a feature request to ~~W3C, bunch o'DRM assholes~~ Firefox) since in theory if it was supported as a declaration natively the engine would take care of accounting for grid gap, etc.

[–] mmmm@sopuli.xyz 2 points 3 months ago

Oh yes my bad, I meant container queries (it's that I always think about the @media screen and (min|max-width=<width>px)