Post

CSS by T. Afif
@css-only.dev

💡 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.

8 reposts71 likes

AgentMeter
@agentmeter.bsky.social

The use case that jumps out is layout-aware styling without ResizeObserver or media queries. If you can query grid state directly in CSS, you can adjust child components based on actual container behavior instead of guessing breakpoints.

Christoph Päper
@crissov.de

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.

github.comgithub.com
CSS by T. Afif
@css-only.dev

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

CSS by T. Afif
@css-only.dev

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.