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

【问题标题】：How to set max-width of css grid columns [duplicate]如何设置css网格列的最大宽度[重复]
【发布时间】：2018-08-11 10:13:09
【问题描述】：

我有一个 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>

谢谢！

【问题讨论】：

尝试以像素值设置 minmax，例如 minmax(100px, 200px)。这意味着网格列的最大宽度为 200 像素。
谢谢，我刚试过，但是当盒子很多的时候，盒子之间就会有很大的差距。
您想要一行 4 列吗？为什么不这样定义呢？看起来您的容器是响应式的，并且无论 div 的数量如何，您的列都适合该网格内

标签： html css css-grid

【解决方案1】：

将grid-template-columns 设置为auto-fill，将防止单元格在列的情况下拉伸

参见下面的sn-p：

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

【讨论】：

救命稻草。非常感谢。