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.

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)

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(); }