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

Question

是否有 CSS 网格配置可以重复（换行）单元格但根据内容的大小动态收缩列，而不是使用统一大小的列？

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

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(); 有两个参数。第一个可以自动调整或自动填充，但第二个必须是特定宽度。有什么方法可以根据内容宽度自动计算它吗？

这是我一直在尝试实现的 codepen。

这也是现实世界的场景：

real world example

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

我对 flexbox 很熟悉，但对网格还不是很熟悉。非常感谢此处的任何指导。

Answer 1

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

你的情况看起来像 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>

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

Is there a way to have repeating columns that shrink to fit content in CSS Grid?

css

css-grid