w3c
[css-contain-3] container queries reacting to css grid column/row width/height
When using CSS Grid, the outer container element is not what the element is sized to. It is sized to the column/row within that element.
Container queries should react to the size of the column/row of the grid, not the size of the parent element.
https://www.w3.org/TR/css-contain-3/
This is problematic as you can create cyclical dependencies. There are lots of ways to trigger this - but this is one example.
<!DOCTYPE html>
<style>
.grid {
display: grid;
grid-template-columns: auto auto;
}
@container (column-width < 100px){
.item {
width: 200px;
grid-column-start: 2;
}
}
@container (column-width > 100px){
.item {
width: 50px;
grid-column-start: 1;
}
}
Before entering into the grid layout we need to have resolved all the styles for the grid-items.
Ian
At this point, the recommendation is to work around this by adding internal containers around grid items. But it's not an ideal solution.
I would be curious to explore if there are ways we can allow this for (some subset of?) grid layouts in a way that avoids the loop issue.
At least, this would need:
- Ignoring the grid placement properties on the items (and abspos?).
- Also ignoring
orderduring auto-placement (could still affect painting). - Treating intrinsic track sizes as fixed/flexible.
I also want to note that, while grid is a special case in which the containing block rectangle maybe be very different than the element that establishes it, a normal block container can also establish containing blocks of different sizes for different descendants, e.g. abspos descendants will use the padding edge while inflow children will use the content edge. So rather than something specific for grid, it may be interesting to have a general way to query the size of the containing block.
