Open AmeliaBR opened 5 years ago
This seems reasonable to me. Randomly thought about auto-adjust
to describe this behavior instead of auto-flex
but didn't give much thought so just sharing in case others find it useful.
It seems simpler (and more flexible) to just add an optional third param as the "ideal length" to repeat()
, like so:
repeat(auto-fit/fill, <track-list>, <fixed-breadth>);
<fixed-breadth>
would be used for calculating the number of tracks in §7.2.3.2. <track-list>
would be used everywhere else. So your example would be solved by:
repeat(auto-fill, 1fr, 100px);
(Assuming you want an auto
track min-sizing function.)
Would #2611 solve your usecase? Something like
grid-template-columns: repeat(auto-fit, minmax(1fr, <length>));
and possibly min-width: 0
to the items.
Edit: it seems that the tracks would be limited to <length>
but you want to avoid gaps. So it wasn't a good suggestion. But I like Mats' idea.
@Loirooriol It depends on how that is spec'd to behave. The discussion in #2611 doesn't cover how a min value of 1fr
would be interpretted in an auto-fit/fill context, and it doesn't look like any matching text ever made it into css-grid-2.
If the auto-fit basis for minmax(1fr, <length>)
is treated as the min-content width (the inherent minimum for flex units), squeezing as many columns as possible in, that's not very useful. But if it's treated as "as much space as available, but no more than <length>
, then it's useful. It would be different from multi-col, because the specified length would be the maximum instead of the minimum-unless-it-overflows. But it would still address the underlying use case.
@MatsPalmgren That's definitely one idea: it allows you to still have the full flexibility of the minmax()
function and keywords, because you separate out the "how many columns" calculation from the "adjusting the final width" calculation.
To make that separation clearer, maybe the <fixed-breadth>
parameter could be included as a function version of auto-fit
/-fill
:
repeat(auto-fit(<fixed-breadth>), <track-list>);
repeat(auto-fill(<fixed-breadth>), <track-list>);
repeat(auto-fit(100px), 1fr);
/* fit as many columns as would be possible at 100px width,
then adjust each to equal width so long as none are less than min-content */
repeat(auto-fit(100px), minmax(0,1fr));
/* ignore the min-content requirement to make them strictly equal */
I'd like an easy & intuitive way to specify the following grid layout pattern: Set an ideal track size (column width or row height), and then have automatic repeats where the actual track size are adjusted to neatly fit the container, without overflowing or leaving gaps.
In other words, I want column widths that are the same as I'd get for a multi-col layout with:
(I'm using columns in the example for comparison to multi-col, but of course this should also work for auto-repeat rows when the block size of the container is constrained.)
You can get almost all the way there, currently, by saying for your grid container:
...but that forces the
<length>
to be treated as a strict minimum track size, causing overflow if the container width is smaller than that. To override the minimum, you either need to wrap theminmax()
function in amin()
function (when that is eventually supported cross-browser) or use a media query (assuming the container width that triggers overflow can be reliably calculated from the document width).With a
min()
constraint added, you're looking at the following CSS:which is:
Some potential syntaxes for making that long, complex command simpler:
PS, If you think there is existing CSS that can handle this more simply, please give it a go:
flex: 1 <length>
on the child items creates the behavior we want, except that the last line doesn't line up into nice columns): https://codepen.io/AmeliaBR/pen/vPwGMb?editors=1100More examples/discussion courtesy of Amber Weinberg-Jones's tweet: https://mobile.twitter.com/amberweinberg/status/1110584873167785985