如何设置CSS网格列的最大宽度

Question

我有一个 CSS Grid，当有很多项目时，它看起来和运作得很好。然而，当只有 1、2 或 3 个项目时，卡片会被拉伸。我试着给每张卡片设置 max-width，但列的宽度仍然保持不变。有没有一种方法可以设置每列的 max-width？我只需要在有 3 列或更少的情况下使用它。（我对 CSS Grid 很新手）

.big-container {
  padding: 0 10%;
}

.header {
  width: 100%;
  height: 50px;
  background-color: blue;
}
.container {
  border: 1px solid black;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
}
.box {
  border: 1px solid black;
  height: 30px;
  background-color: yellow;
}

<div class="big-container">
  <div class="header"></div>
  <p>Text</p>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

</div>
</div>

谢谢！

- Tom Bom

---

尝试将minmax设置为像素值，例如minmax(100px, 200px)。这意味着网格列的最大宽度可以达到200像素。 - Sujan Sundareswaran

谢谢，我刚试了一下，但是当有很多盒子时，它们之间会产生很大的间隔。 - Tom Bom

你想要一行中有4列吗？为什么不直接这样定义呢？看起来你的容器是响应式的，你的列被设计成适应该网格内的任意数量的div。 - Gabby_987

Answer 1

将grid-template-columns设置为auto-fill，可以防止列数小于4时单元格被拉伸。

请参见下面的片段：

.big-container {
  padding: 0 10%;
}

.header {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.container {
  border: 1px solid black;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}

.box {
  border: 1px solid black;
  height: 30px;
  background-color: yellow;
}

<div class="big-container">
  <div class="header"></div>
  <p>Text</p>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

- Bourbia Brahim