Grid auto-fit with fixed max-width [duplicate]

Question

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 8px;
}
.item {
  height: 32px;
  background: red;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

I've created a grid layout with auto-fit and minmax. But there is one thing i can't figure out. If there is not enough items, I don't want my columns to be too wide. Basically, I want a grid column to be 1fr unless 1fr is bigger then some fixed value (like 200px). Is there a way to implement this?

Answer 1

Do you mean like this?

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  grid-gap: 8px;
}
.item {
  height: 32px;
  background: red;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>