search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.48k stars 661 forks source link

[css-contain-3] container queries reacting to css grid column/row width/height #7630

Open Dan503 opened 2 years ago

Dan503 commented 2 years ago

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/

bfgeek commented 2 years ago

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

mirisuzanne commented 1 year ago

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.

Loirooriol commented 1 year ago

At least, this would need:

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.