Grid auto-fit with fixed max-width

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?

Does this question solve your problem (look beyond just the first answer, too...) https://stackoverflow.com/questions/45459151/how-to-set-the-maximum-width-of-a-column-in-css-grid-layout ? — TylerH, Mar 17 '22 at 16:21

score 0 · Answer 1 · answered Mar 17 '22 at 17:07

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>

Grid auto-fit with fixed max-width

1 Answers1