如何设置css网格列的最大宽度[重复]

Question

这个问题在这里已有答案：

• What is the difference between auto-fill and auto-fit? 1回答

我有一个css网格，当有很多项目时它看起来很棒。但是，当有1,2或3个项目时，卡片会被拉伸。

我试图将max-width设置为每张卡，但列的宽度保持不变。有没有办法设置每列的max-width？我需要在有3列或更少的列时才使用它。 （我对css网格很新）

.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>

谢谢！

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>