Skip to content
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

repeat with auto-fill, minmax and max-value being a percentage overflows instead of wrapping #54

Open
Zyclotrop-j opened this issue Jun 13, 2019 · 0 comments

Comments

@Zyclotrop-j
Copy link

Zyclotrop-j commented Jun 13, 2019

Demo:

Codepen: https://codepen.io/anon/pen/XLmXeL

Considing the following:

grid-template-columns: repeat(auto-fill, minmax(<X>px, <Y>%));
for example: grid-template-columns: repeat(auto-fill, minmax(400px, 25%));

Expected behaviour:

Items are at least Xpx (eg 400px), but at most take Y% (eg 25%) of the grid.
When Xpx is bigger than Y% (eg with grid-width 800px -> 400px > 25%), Xpx is used (https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax: "If max < min, then max is ignored and minmax(min,max) is treated as min.")
Therefore the auto-fill will create at most Y% columns (eg 4 columns at 25%, 5 columns at 20%, 10 columns at 10%, ...), but there might be fewer, given the width of the grid (eg for a grid with with 800px and X = 400, there should be two).
Each column is at least Xpx (eg 400px).
This way items wrap nicely and no item is placed auto-side the grid.

Observed behaviour:

There are more grid-columns created than fit the grid. To be exact, there are always as many columns created as would fit the maximum-value (25% -> 4 columns, 20% -> 5 columns, ...).
Each column takes the minimum-value as width (in the example above 400px).
This makes the grid overflow! It also prevents the intended wrapping.

Note that by above logic the following should holds true:

Given
"If max < min, then max is ignored and minmax(min,max) is treated as min."
width: 800px;

Then
grid-template-columns: repeat(auto-fill, minmax(400px, 25%));
Should equal
grid-template-columns: repeat(auto-fill, 400px);

because
minmax(400px, 25% [of 800px])) = minmax(400px, 200px)) = 400px

Browsers

Observed in Firefox (67.0.2 (64-bit)) and Chrome (Version 74).

Partial workaround

Use flexbox (display: flex on wrapper) with wrapping (flex-wrap: wrap on wrapper) and max-width: 25%, min-width: 400px, width: 100vw (all on child; potentially add box-sizing: border-box to fit all four items despite of borders).
Downsides: Item's can't be placed at certain positions in the grid. Items can't stretch in height (span 2 + dense grid).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant