CSS网格布局：如何使单元格自适应宽度？

Question

我正在使用CSS网格布局来排列页面上的项目（可以是卡片、文本、iframe等），但有时列表中的某个项目可能比其他项目更宽，因此会发生溢出。我该如何解决这个问题？我注意到，在高度方面，列实际上会根据内容进行调整，而我的当前设置没有任何问题。

.wrapper-content {
 display: grid;
 grid-template-columns:repeat(auto-fill, minmax(11rem, auto));
 grid-auto-rows: minmax(12rem, auto);
 grid-gap: 1em;
}

问题在于，如您所见，iframe比周围的卡片要大，因此被覆盖。

- Matrix

Answer 1

我实际上已经找到了如何实现我想要的效果。我们可以设置一个项目应该跨越多少列。例如，如果网格中有一个 iframe ，也许我们希望它跨越两列，而其他所有东西都只跨越一列。为了实现这一点，我们可以创建一个类，然后将此类应用于 iframe 元素：

.iframe-in-grid {
  grid-column: span 2;
}

如果您想增加元素的高度，请通过行跨度来实现，例如：

grid-row: span 2;

- Matrix

Answer 2

你可以为你的图片设置max-width。以下是代码：

.wrapper-content img { max-width:100%}

如果您正在使用响应式布局，那么样式表文件是必不可少的。

对于iframe或其他需要更改网格系统的元素，您可以使用以下代码将项目保持在原始宽度的情况下并排放置：

.wrapper-content {
 display: inline-block;
 vertical-align:top;
}

或者使用弹性布局 .wrapper-content {display:inline-flex}

还可以将grid-template-columns属性的值更改为auto，这样列的大小将由容器的大小和列中项目的内容大小决定。

- Alireza

---

谢谢你的回答，不过问题并不是出在图片上。那是一个iframe，它超出了它所在单元格的大小。我不想限制它在单元格大小内，我希望它能够自动扩展，以便正确显示而不被遮挡。 - Matrix

我修改了我的回答，请看一下它是否对你有效。 - Alireza

嗯，你看，网格对其他元素来说完美运作，所以我不想换成其他东西。你提出的答案建议使用不同的显示样式来包装类。但这会影响到所有的元素，我不能只将其应用于超出边界的元素，对吧？当我再次考虑时，我开始怀疑是否实际上我想要实现的目标无法通过网格来实现？ - Matrix

为什么不使用 grid-template-columns: auto？现在列的大小由容器的大小和列中项目内容的大小决定。 - Alireza

如果我使用grid-template-columns: auto，我只会得到一个跨越整个内容区域宽度的列。我需要多个列。 - Matrix

我认为你改变列宽度的唯一方法是为每个需要改变宽度的列定义一个类，并使用类似于 grid-column: auto / span 2; 的方式。你不能在minmax中使用auto。 - Alireza