Post

💡 CSS Tip! Using modern CSS, it is now easy to extract information from a responsive grid. You can get the number of columns, the number of rows, and item coordinates. css-tip.com/grid-informa... A handy code to save for (hopefully) the near future.

Christoph Päper

@crissov.de

17 Aug

If you really need those integer values sometimes, shouldn’t CSS just provide them? I don’t have encountered strong use cases for that myself, but suggested such anyway, as predefined counters in #12824, but functions might work better in general.

But CSS "is" providing them. I built a specific structure (the responsive grid) and I have everything I need to compute the values I want to use (sibling-*(), calc(), math functions, etc)

Christoph Päper

@crissov.de

Sure, I meant directly, e.g. like so: container { --m: grid-col-count(); --n: grid-row-count(); } container > * { --x: grid-col-index(); --y: grid-row-index(); }

17/8/26, 6:36 pm0 reposts0 likes

CSS by T. Afif

@css-only.dev

17 Aug

That would be a lot of things to consider (grid template, subgrid, spanning multiple column/row) so I suppose it will be too much work to implement compared to a few CSS lines to get the values for a specific case. But maybe one day will have such a thing.