css - 有没有办法让重复列缩小以适应 CSS 网格中的内容？

Question

是否有一个 CSS Grid 配置会重复（包装）单元格，但会根据内容的大小动态收缩列，而不是使用统一大小的列？

例如，这是使用以下规则的配置：

display: grid;
grid-template-columns: repeat(auto-fit, 186px);
grid-auto-columns: min-content;

网格示例 1

请注意，尽管最后一列的内容较窄，但它使用与其他列相同的宽度（186px）

我希望列缩小到内容的宽度，同时在屏幕尺寸缩小时仍然包裹。

网格示例 2

注意最后一列现在比其他列更窄。

似乎grid-template-columns: repeat(); 有两个参数。第一个可以是自动适应或自动填充，但第二个必须是特定宽度。有什么方法可以根据内容宽度自动计算？

这是我一直在尝试实现这一目标的代码笔。

这也是现实世界的场景：

现实世界的例子

注意第一列应该更宽以填充内容，第二列应该缩小到内容。

我对 flexbox 很熟悉，但对网格还不是很熟悉。这里的任何指导将不胜感激。

标签： csscss-grid

Answer 1

您可以创建适合内容的重复列，但对于固定数量的列。当您使用 时auto-fit，auto-fill 网格会生成相同宽度的所有单元格。

在您的情况下，看起来像 3x3。

display: grid;
grid-template-columns: repeat(3, min-content);

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  background-color: hsl(215, 100%, 98%);
  position: relative;
  overflow-x: hidden;
}

.container {
  background-color: lightgray;
  width: 760px;
  display: grid;
  grid-template-columns: repeat(3, min-content);
  resize: horizontal;
  overflow: hidden;
  gap: 5px;
  justify-items: center;
  align-items: center;
}

.child {
  background-color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

p {
  text-align: center;
}

<div class="container">
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/80x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/120x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/160x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/80x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/120x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/160x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/80x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/120x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/160x75" alt="" />
  </div>
</div>

似乎 grid-template-columns: repeat(); 有两个参数。第一个可以是自动适应或自动填充，但第二个必须是特定宽度。有什么方法可以根据内容宽度自动计算？

在repeat()函数中，您可以使用另一个函数minmax()作为第二个属性。但这并不能解决您的问题，因为第一个参数定义了最小宽度，例如186px，第二个参数定义了它的扩展大小。

display: grid;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  background-color: hsl(215, 100%, 98%);
  position: relative;
  overflow-x: hidden;
}

.container {
  background-color: lightgray;
  width: 760px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  resize: horizontal;
  overflow: hidden;
  gap: 5px;
  justify-items: center;
  align-items: center;
}

.child {
  background-color: gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

p {
  text-align: center;
}

<div class="container">
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/80x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/120x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/160x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/80x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/120x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/160x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/80x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/120x75" alt="" />
  </div>
  <div class="child">
    <p>title</p>
    <img src="https://via.placeholder.com/160x75" alt="" />
  </div>
</div>