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

Question

是否有 CSS Grid 配置会重复(包装)单元格但根据内容的大小动态缩小列，而不是使用统一大小的列？
例如，这是使用以下规则的配置:

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

grid example 1
请注意，虽然最后一列的内容较窄，但它使用与其他列相同的宽度 (186px)
我希望列缩小到内容的宽度，同时在屏幕尺寸折叠时仍然环绕。
grid example 2
注意最后一列现在比其他列更窄。
似乎 grid-template-columns: repeat();需要两个参数。第一个可以是 auto-fit 或 auto-fill，但第二个必须是特定的宽度。有没有办法允许根据内容宽度自动计算？
这是 codepen我一直在努力实现这一目标。
这也是真实世界的场景:
real world example
注意第一列应该更宽以填充内容，第二列应该缩小到内容。
我熟悉 flexbox，但我对 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>

It seems grid-template-columns: repeat(); takes two arguments. The first of which can be auto-fit or auto-fill, but the second must be a specific width. Is there any way to allow this to be automatically computed based on content width?

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