Re: [csswg-drafts] [css-conditional] Layout State Container Queries: `column-position` feature for flex/grid/multi-column layouts (#13729)

The CSS Working Group just discussed ``[css-conditional] Layout State Container Queries: `column-position` feature for flex/grid/multi-column layouts``, and agreed to the following:

* `RESOLVED: Start working on spec for grid and tables in css-conditional-5`

<details><summary>The full IRC log of that discussion</summary>
&lt;emilio> TabAtkins: container queries let us ask about lots of things in the container<br>
&lt;kizu> q+<br>
&lt;emilio> ... due to the restrictions we put<br>
&lt;emilio> ... one thing people ask for is column / rows<br>
&lt;emilio> ... it'd be fine for a child to ask the grid which column is it in<br>
&lt;emilio> ... main idea would be to allow us to query a few more layout aspects<br>
&lt;emilio> q+<br>
&lt;sgill> q+<br>
&lt;kbabbitt> q+<br>
&lt;iank_> q+<br>
&lt;lea> +1 yessssss<br>
&lt;emilio> ... main thing would be column / row positions in the various layout modes<br>
&lt;astearns> ack kizu<br>
&lt;emilio> kizu: yes +1 to the ask<br>
&lt;emilio> ... long-standing request<br>
&lt;lea> this is huge<br>
&lt;emilio> ... grid is probably one of the simpler ones<br>
&lt;emilio> ... until we introduce spanning<br>
&lt;lea> q+<br>
&lt;emilio> ... for other things like multicol or flex it's a lot more complicated<br>
&lt;emilio> ... would be nice to have<br>
&lt;emilio> ... regular containment would help<br>
&lt;emilio> ... size containment maybe then we can query the position of the flex item<br>
&lt;kizu> https://kizu.dev/position-driven-styles/#edge-detection (best viewed™️ in Chrome; I'll need to investigate why Safari is not doing the same; might be a problem in my code, but maybe something to report)<br>
&lt;emilio> ... right now it is possible to do * position animations because you can detect in view-timeline and so on<br>
&lt;emilio> ... this is something people want<br>
&lt;florian> q+<br>
&lt;emilio> ... would be nice to be able to pursue this in some way<br>
&lt;emilio> TabAtkins: for some layout modes children can affect your row, for those we'd need to have size containment<br>
&lt;kbabbitt> q-<br>
&lt;astearns> ack emilio<br>
&lt;TabAtkins> emilio: is the idea that the CQ now doesn't match just on the econtainer state, but also on the element it's querying from<br>
&lt;TabAtkins> TabAtkins: I don't understand<br>
&lt;TabAtkins> emilio: there's an example: column-position:last<br>
&lt;fantasai> TabAtkins: container is the grid item<br>
&lt;fantasai> emilio: ah, not the grid container<br>
&lt;fantasai> TabAtkins: otherwise it's circular<br>
&lt;fantasai> emilio: ok, that explains<br>
&lt;kizu> It could be something like a “layout query” with containment on items/etc being something that enables it maybe<br>
&lt;fantasai> emilio: so for grid in particular, there's no way that a layout change inside the item would change what column it ends up in<br>
&lt;fantasai> TabAtkins: correct<br>
&lt;fantasai> emilio: then that seems fine<br>
&lt;fantasai> TabAtkins: only grid can do that<br>
&lt;fantasai> fantasai: also table<br>
&lt;fantasai> TabAtkins: table cells don't care about their size<br>
&lt;fantasai> emilio: ok, seems doable...<br>
&lt;fantasai> emilio: a bit sketchy to ask based on state of ancestor ... but conceptually about the element ...<br>
&lt;astearns> ack sgill<br>
&lt;fantasai> sgill: I was just going to cover the last point<br>
&lt;fantasai> sgill: it works in grid, and maybe tables<br>
&lt;fantasai> sgill: but not in grid-lanes<br>
&lt;fantasai> TabAtkins: flexbox, grid-lanes, multicol, would need size containment so that children can't affect size<br>
&lt;astearns> ack iank_<br>
&lt;fantasai> iank_: Same concern wrt grid-lanes. Maybe carve out exception for explicit placement<br>
&lt;fantasai> iank_: for other layout modes, would need strict containment almost<br>
&lt;fantasai> iank_: because you would lay out often before you place them<br>
&lt;fantasai> iank_: to determine hypothetical size etc.<br>
&lt;fantasai> iank_: so it needs to be quite restrictive there<br>
&lt;fantasai> TabAtkins: I know it needs size containment. Idk about others<br>
&lt;fantasai> iank_: It needs style. Because it can affect the counters around it.<br>
&lt;fantasai> TabAtkins: if we need more containment, sure<br>
&lt;astearns> ack lea<br>
&lt;astearns> ack florian<br>
&lt;fantasai> florian: If we can get this to work in multicol, can we also get it to work on pages?<br>
&lt;fantasai> TabAtkins: detect what page?<br>
&lt;fantasai> TabAtkins: I think so<br>
&lt;fantasai> florian: there are uses for that<br>
&lt;fantasai> iank_: You'd need size containment<br>
&lt;fantasai> iank_: problem with fragmentation is that you also need to be monolithic<br>
&lt;kizu> q+<br>
&lt;fantasai> iank_: otherwise what happens if you're in 2 pages or 2 columns<br>
&lt;fantasai> florian: but not worse for pages than columns, so if can do for one do for both<br>
&lt;astearns> ack kizu<br>
&lt;fantasai> kizu: for multicol and grid and some other layout, might be one separate feature which would be very useful<br>
&lt;fantasai> kizu: if you have a grid inside multicol (!!!!) it would be very nice when it were fragmented to be able to switch the order of columns in different columns of multicol<br>
&lt;fantasai> kizu: Example: print-like page layout where you have gutters and page-spread with images on the outside of each page<br>
&lt;fantasai> kizu: It wouldn't change layout, just change the order<br>
&lt;kbabbitt> q+<br>
&lt;fantasai> florian: Yeah, flipping sides is a very common case.<br>
&lt;astearns> an+b column selectors might be a better fit for this?<br>
&lt;astearns> ack fantasai<br>
&lt;emilio> fantasai: for fragmentation, knowing something what page something is in<br>
&lt;emilio> ... requiring monolithic stuff is not going to get you what you want<br>
&lt;alisonmaher> q+<br>
&lt;emilio> ... being able to respond to the question would be useful even if fragmented<br>
&lt;emilio> ... you can tell which page you start on<br>
&lt;fantasai> TabAtkins: grid and table, simple and easy<br>
&lt;fantasai> TabAtkins: flexbox requires at least style and size containment, because size determines where you sit<br>
&lt;fantasai> TabAtkins: but can't fragment so can't live across lines<br>
&lt;Kurt> q+<br>
&lt;fantasai> TabAtkins: multicol and page layout, can live in multiple columns<br>
&lt;fantasai> TabAtkins: what if we do the easy ones first?<br>
&lt;fantasai> TabAtkins: grid + table<br>
&lt;fantasai> TabAtkins: then figure out flexbox<br>
&lt;fantasai> TabAtkins: then figure out design for fragments<br>
&lt;fantasai> TabAtkins: So for now would just add the grid and table version<br>
&lt;astearns> ack kbabbitt<br>
&lt;fantasai> kbabbitt: For fragmentation, wondering if we get into weird cases if e.g. left pages and right pages have different margins<br>
&lt;sgill> q+<br>
&lt;fantasai> florian: it's a giant can of worms, but I'm hoping that the containment constraints can help<br>
&lt;fantasai> florian: the Vivliostyle engine had features for this<br>
&lt;fantasai> florian: when you use these features, layout is not guaranteed to terminate<br>
&lt;TabAtkins> Ah, Flexbox and grid-lanes, rather. that's the second category. (layout-dependent but well-defined singular position)<br>
&lt;fantasai> florian: but we've solved that here, so can we extend to these use cases<br>
&lt;astearns> ack alisonmaher<br>
&lt;fantasai> florian: There really are a bajillion use cases<br>
&lt;fantasai> alisonmaher: In Grid you can have spanners, so you can be in multiple columns or rows. Is that not the same quest?<br>
&lt;fantasai> TabAtkins: you're right<br>
&lt;astearns> ack Kurt<br>
&lt;iank_> and that happens with tables as well.<br>
&lt;fantasai> Kurt: We wouldn't want the container query to set the grid area because then you have circularity<br>
&lt;iank_> (e.g. `&lt;td colspan=2>`<br>
&lt;fantasai> TabAtkins: you don't have that because this only allows styling children of the grid item.<br>
&lt;astearns> ack sgill<br>
&lt;fantasai> sgill: Is there one caveat here with grid, where if you have several levels of nested subgrids, and then you change how it spans or something like that?<br>
&lt;fantasai> TabAtkins: I don't believe so?<br>
&lt;fantasai> TabAtkins: At least, rules for what is a valid container for you can make sure it's acceptable<br>
&lt;fantasai> iank_: I think you need "establishes an independent formatting context"<br>
&lt;fantasai> iank_: same as we do for container queries. subgrid can't participate in outer grid if it's a size container<br>
&lt;iank_> conditional-5 ?<br>
&lt;fantasai> https://www.w3.org/TR/css-conditional-5/<br>
&lt;astearns> ack fantasai<br>
&lt;iank_> conitional-6 !<br>
&lt;TabAtkins> fantasai: we do need to work on the spanning problem<br>
&lt;emilio> fantasai: re. spanning maybe you just return true on any?<br>
&lt;TabAtkins> TabAtkins: yeah figure out what queries we want<br>
&lt;TabAtkins> fantasai: also the syntax suggested is a bit complex, can do simpler than that<br>
&lt;TabAtkins> TabAtkins: agreed<br>
&lt;fantasai> astearns: Initial problems to chew over. Any objections to start working on this?<br>
&lt;fantasai> PROPOSED: Start working on spec for grid and tables in css-conditional-5<br>
&lt;fantasai> arronei: with likelihood that it goes to L6<br>
&lt;fantasai> RESOLVED: Start working on spec for grid and tables in css-conditional-5<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13729#issuecomment-4181061739 using your GitHub account


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

Received on Thursday, 2 April 2026 23:56:51 UTC