1

Why do these 2 divs wrap on 300px? Shouldn't they wrap when the element hits the min value in minmax? I tried both auto-fit and auto-fill but it still doesn't work.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 300px));
  width: 100%;
  height: 500px;
}
.item {
  height: 100px;
  background: blue;
  border: 1px solid black;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
J. Vomacka
  • 11
  • 1
  • In your question you talk about 3 divs while there are only 2. Also what do you expact to happen? – SuperDJ Nov 02 '18 at 23:05
  • My bad, but it should work the same with 2. I expect that they will wrap when they reach 150px width. – J. Vomacka Nov 02 '18 at 23:10
  • Is that something they should always do or is there a change that they can be 300px width as well? – SuperDJ Nov 02 '18 at 23:11
  • From what i understood, they should be each 300px width as long as they have enough space. When you get on a smalled device, they should either shrink to fit, or wrap if they cant be at least 150px wide. – J. Vomacka Nov 02 '18 at 23:18

0 Answers0