New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-grid] More granular auto placement from grid container element #7399
Comments
Could've sworn we had an issue on adding row-reverse and column-reverse, but I can't find it... but yes, we should definitely add it. As for the named area thing, can you explain a bit more what you're wanting and why? |
The naming thing really just makes it easier to create a layout template without the need to add classes/styles to each individual child. Currently, some grids work automatically to place their content - but as soon as you add empty cells, it no longer works. Picture this:- .modal {
grid:
"heading heading heading" auto
". . . " 8px
"body body body " auto
". . . " 12px
"cancel . confirm" auto /
1fr 4px 1fr
} It's very cumbersome to manually place each child - and makes the layout much less reusable |
As proposed in #4457 Something like Proposed value :
Proposed combinaisons :
Those combinations mean changing the formal syntax of
Controlling how areas are ordered in the auto-flowControl of the order of the areas in the flow could be done using
that could give something like :
|
Resolved in #3622 (comment) |
https://www.w3.org/TR/css-grid-1/#track-sizing-algorithm
In a many cases, you can rely on the default placement of the grid to do what you want. However, in the cases that it isn’t, you currently have to define
grid-area
(or other) on the children elements, which seems like a lot of extra ceremony.Firstly, it would be nice if
grid-auto-flow
could be extended to allow named grid areas beforerow
/column
to populate these areas first.And this should also work on the
grid
property itself.Presumably, if any children had explicit grid areas, they would be excluded from the auto placement. It’s probably an edge case anyway.
Secondly, it would be nice to add
{row,column}-reverse
togrid-auto-flow
, to matchflex-direction
- where it will fill items in from the end rather than the startThe text was updated successfully, but these errors were encountered: