时间戳

首页 > 解决方案 > Css网格：如何使单元格调整宽度？

css - Css网格：如何使单元格调整宽度？

问题描述

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

标签： cssoverflowcss-grid

解决方案

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

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

如果要使元素的高度更大，请像这样跨越行：

grid-row: span 2;

推荐阅读