Css网格：如何使单元格调整宽度？答案

【问题标题】：Css grid: how to make cell adjust in width?Css网格：如何使单元格调整宽度？
【发布时间】：2020-08-25 16:22:17
【问题描述】：

我正在使用 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 比它周围的卡片大，因此它被覆盖了。

【问题讨论】：

标签： css overflow css-grid

【解决方案1】：

我实际上想出了如何实现我正在寻找的东西。我们可以设置一个项目应该跨越多少列。因此，例如，如果我们在网格中有一个 iframe，也许我们希望它跨越 2 列，而不是跨越一列的所有其他内容。为此，我们可以像这样创建一个类，然后将这个类应用于 iframe 元素：

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

如果你想让元素的高度更大，可以像这样跨行：

grid-row: span 2;

【讨论】：

【解决方案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 属性的值更改为自动，这样列的大小由容器的大小和列中项目内容的大小决定。

【讨论】：

感谢您的回答，但是，问题不在于图像。那是一个超出其单元格大小的 iframe。而且我不想将其限制为单元格大小，我希望它能够扩展，以便在没有任何覆盖的情况下正确显示。
我编辑了我的答案，请看看它是否适合你。
嗯，你看，网格在其他元素上工作得很好，所以我不想把它换成别的东西。您提出的答案建议为包装类使用不同的显示样式。但这会影响所有元素，我不能将它应用于超出范围的元素，可以吗？当我重新考虑这一点时，我开始假设实际上我想要实现的目标是使用网格无法实现的？
你为什么不使用grid-template-columns: auto ？现在列的大小由容器的大小和列中项目内容的大小决定。
如果我使用grid-template-columns: auto，我只会得到一列，跨越内容区域的整个宽度。我需要多列