0

Begin from such a grid:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

It works, but the 1fr is a bit out of control. I want to limit it to some fixed value, say, 150px:

grid-template-columns: repeat(auto-fit, minmax(100px, 150px));

But it doesn't work, the columns are not elastic any more, always have width of 150px, see this demo:

my-container {
  display: grid;
  width: 100%;
  border: 1px solid black;
  grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
  grid-gap: 16px;
}

my-block {
  display: block;
  width: 100%;
  height: 100px;
  background: yellow;
}
<my-container>
  <my-block></my-block>
  <my-block></my-block>
  <my-block></my-block>
  <my-block></my-block>
  <my-block></my-block>
  <my-block></my-block>
  <my-block></my-block>
  <my-block></my-block>
  <my-block></my-block>
</my-container>

How to make it work, so that when I stretch the container, the column would get wider but not more than 150px, until there is space to add a new column into the grid?

Yao Zhao
  • 4,373
  • 4
  • 22
  • 30

0 Answers0