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

Answer 1

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

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

如果您使用的是响应式布局，则它是您的样式表文件所必需的。

对于 iframe 或您需要更改网格系统的任何其他元素，您可以使用以下代码使项目以其原始宽度彼此相邻：

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

或使用 flex .wrapper-content {display:inline-flex}

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

Answer 2

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

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

如果你想让元素在高度方面变大，像这样跨越行：

grid-row: span 2;

Css 网格：如何让单元格调整宽度？

Css grid: how to make cell adjust in width?

css

overflow

css-grid