- From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
- Date: Wed, 04 Nov 2020 22:45:58 +0000
- To: public-css-archive@w3.org
Unfortunately, percent sizes on flex items aren't able to take gaps into account. Making them consider gaps means the base size of the item depends on the number of items in the line which depends on the base sizes of the other items... which creates a cycle. Instead, the percentages are resolved without consideration of siblings, only of the container, same as percentages in other layout modes like Block.
As for your examples, we're not exactly understanding what you're trying to do...
If you want a grid with four equally-sized columns, you do it like this:
grid-template-columns: repeat(4, 1fr);
and if you want one that has a content-sized column and a fill-remaining-space column, you do it like this:
grid-template-columns: auto 1fr;
From your last two examples, it appears that your ".col-auto" class would make the flex item fully flexible so it takes up all remaining space that isn't taken by other items already. It is indeed not possible to have a grid item automatically span columns based on unoccupied space in the grid. If you want that, you generally design your grid with an `1fr` column as shown above, or if you do need something like a 12-col grid to start with, you instead count how many columns are taken up by the other items and give your "auto" item the correct span to fill the remaining columns.
If there's a need to combine both kinds of layout (fixed-column and auto-spanning) in a single grid, please raise that as a separate issue with some clear examples, as we'll need to close this issue (percentage resolution in consideration of gaps) as no change.
--
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5399#issuecomment-722015526 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 4 November 2020 22:46:00 UTC