Re: [csswg-drafts] [css-grid] Better cell placement controls. (#12658)

> See the fascinating work of @Noleli in this area: [codepen.io/noleli/pen/QwjBWqz](https://codepen.io/noleli/pen/QwjBWqz)

Ah, it took me a while to realize what was going on here, since the calc() syntax doesn't work in Chrome yet so I was just seeing what looked like a perfectly normal Grid ^_^. It's setting the height of `output` and the background color of the `li`s based on how many columns are in the grid, determined by doing some math on CQ units.

----------

A row/column count function isn't cyclic in Grid *so long as it refers only to the explicit grid* (what's defined by `grid-template`). If you want it to refer to the *implicit grid* (extra columns/rows created by placement, defined by `grid-auto-*`), then yes, it's cyclic, as you can put an element into the N+1th column. In this example, then, one could potentially count the number of columns, but there's always 0 explicit rows.

However, in Masonry it's potentially cyclic in all cases, because resolving the repeat() is allowed to depend on the heuristically-determined size. You'd need some handling similar to how we treat `width: 50%` on children when the parent is content-sized (basically, just treating the counting value as 0 (or maybe 1) while figuring out how many tracks there are, then letting it resolve properly afterwards). (We can't fix the Grid cycle in this way, however, as it's cyclic in a different, "larger" fashion.)

-------

> A `grid-cell` CSS property could work much like `grid-column` or `grid-row` but traverse multiple rows or columns to resolve it's location.

This is, again, potentially workable if it counts based on the explicit grid, at least when determining what index it wraps at. (So, for the standard `grid-auto-flow: rows`, it would just need to care about `grid-template-columns`.) However, I wonder how useful that really is. Do you have some examples of how this would be used? It could also be done by relying on `grid-auto-flow` and using `order` to, say, put 4 of the auto-flowed items before it and the rest after it.

-------

Outside of any solution in pure CSS, I've had an action item to actually define a Grid Information API in JS for years now, so you can just ask an element how many rows/columns it ended up with, their sizes and positions, and what grid areas the items ended up in. Would that help here?

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12658#issuecomment-3225759011 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 26 August 2025 21:16:10 UTC