css - 在 CSS Grid 中将列宽设置为内容宽度

Question

我希望每个网格元素都适合它的内容宽度(400px)，并保持自动填充。我该怎么做？

body {
  margin: 0px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, auto));
  grid-gap: 10px;
  width: 100%;
}

<div class="container">
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
</div>

Answer 1

只需将 minmax(240px, auto) 替换为固定宽度 400px。

请注意，当视口(viewport)的宽度不是 400 的精确倍数时，这会产生间隙，但仍会添加元素以尽可能多地填充空间。

body {
  margin: 0px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 400px);
  grid-gap: 10px;
  width: 100%;
}

<div class="container">
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
</div>