1

I am trying to have a grid with auto-fill columns and at the same time stretch columns when there is leftover space. So I use grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));. This works as expected. But when I tried to limit the maximum size of the columns with grid-template-columns: repeat(auto-fill, minmax(100px, 120px)); it stops working and takes into account only the max size.

The snippet below shows 2 grids with the two configs. Is that an issue with the browser or am I missing something?

#grid1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 120px)); /* not working as expected */
  grid-gap: 16px;
}

#grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* working as expected */
  grid-gap: 16px;
}

#grid1 > * {
  border: 1px solid navy;
  height: 100px
}

#grid2 > * {
  border: 1px solid green;
  height: 100px
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="grid1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <hr>
  <div id="grid2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Alexandar Mitsev
  • 293
  • 1
  • 7
  • `fr` is flexible unit while in the other example you have two absolute value so the result will be an absolute value and it's the biggest one. – Temani Afif Sep 20 '19 at 08:55
  • "_and at the same time stretch columns when there is leftover space_". Isn't that more of a job for `auto-fit` than `auto-fill` ? – Pierre-Yves Legeay Sep 20 '19 at 09:55
  • @TemaniAfif the question is why the minmax is ignored at all. Since "breathing" is possible with minmax(100px, 1fr) why it is not possible with minmax(100px, 120px). I could not find information in the tracks size spec that this is not supported. – Alexandar Mitsev Sep 20 '19 at 10:30
  • it's not ignored, it's giving you the max which is 120px because element will try to fill the maximum of the space .. use bigger value inside minmax() and reduce the window size until you have only one element by column then you will get a value in the range of min/max – Temani Afif Sep 20 '19 at 10:35
  • you have exactly the same result when using `fr` but `fr` is a flexible value and not a fixed value like `120px` – Temani Afif Sep 20 '19 at 10:35
  • With 1fr the algorithm adds as many columns with min size as possible. Only when it can not fit more columns with min size, it starts to increase the size. I was hoping for the same but with a limit to the max size. – Alexandar Mitsev Sep 20 '19 at 10:41
  • this is exactly what is happening: *with a limit to the max size* --> you reached the limit of 120px so the elements cannot grow more – Temani Afif Sep 20 '19 at 10:58
  • but the elements also don't drop to 100px in order to fill more columns – Alexandar Mitsev Sep 20 '19 at 11:22
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199729/discussion-between-alexandar-mitsev-and-temani-afif). – Alexandar Mitsev Sep 20 '19 at 11:29

0 Answers0