You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
The text was updated successfully, but these errors were encountered:
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
(eg400px
), but at most takeY%
(eg25%
) of the grid.When
Xpx
is bigger thanY%
(eg with grid-width800px
->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 with800px
andX = 400
, there should be two).Each column is at least
Xpx
(eg400px
).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) andmax-width: 25%
,min-width: 400px
,width: 100vw
(all on child; potentially addbox-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).The text was updated successfully, but these errors were encountered: