删除CSS Grid中的大差距

Question

我使用css网格进行了设计,这给了我行间意想不到的空间.我用以下代码复制了我的问题:

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
article {
  background: red;
}
.item1 {
  height: 30px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item2 {
  height: 100px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item3 {
  height: 300px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.item4 {
  height: 490px;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 5;
}
.item5 {
  height: 160px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
}
.item6 {
  height: 520px;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 7;
}
.item7 {
  height: 300px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 6;
  grid-row-end: 7;
}

<main>
  <article class="item1"></article>
  <article class="item2"></article>
  <article class="item3"></article>
  <article class="item4"></article>
  <article class="item5"></article>
  <article class="item6"></article>
  <article class="item7"></article>
</main>

在这里,您可以看到底部项目顶部的额外间隙.

我发现了一个类似的问题 - 为什么CSS Grid布局会在单元格之间增加额外的间隙？- 额外的差距是由数字造成的,并使用数字解决display: flex,但这对我不起作用.

任何的想法？

---

编辑:

我的例子是误导性的,这是一个更接近实际问题的版本:

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
article {
  background: red;
}
article div {
  background: blue;
}
.item1 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
}
.item1 div {
  height: 30px;
}
.item2 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;
}
.item2 div {
  height: 100px;
}
.item3 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}
.item3 div {
  height: 300px;
}
.item4 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 4;
}
.item4 div {
  height: 490px;
}
.item5 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 2;
}
.item5 div {
  height: 160px;
}
.item6 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 2;
}
.item6 div {
  height: 520px;
}
.item7 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 1;
}
.item7 div {
  height: 300px;
}

<main>
  <article class="item1"><div></div></article>
  <article class="item2"><div></div></article>
  <article class="item3"><div></div></article>
  <article class="item4"><div></div></article>
  <article class="item5"><div></div></article>
  <article class="item6"><div></div></article>
  <article class="item7"><div></div></article>
</main>

在这里你可以看到红色的额外差距.包含的高度div只是为了模拟文章的真实内容,因此它们不能在实际示例中修改(它们在实际代码中保留为默认值).根据预编辑的答案,我尝试了grid-auto-rows属性,但它没有解决问题.

Answer 1

您有一个包含三个显式列和 10px 装订线的网格容器：

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

没有定义行。所有行都是隐式的并采用内容高度（因为网格容器的默认设置是grid-auto-rows: auto）。

在这个容器内有七个网格项，它们使用基于行的放置来定位。

让我们把它分解成单独的部分。

第 1 项

.item1 {
    height: 30px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

足够简单。项目 1 跨越第一列和第一行。它的高度为 30px，用于设置行高。

第 2 项

.item2 {
    height: 100px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

再次，非常简单。项目 2 跨越第一列和第二行。它的高度为 100px，用于设置行高。

第 3 项

.item3 {
    height: 300px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

与上面的两个项目一样，第 3 项清晰而简单。它跨越第一列和第三行。它的高度为 300px，用于设置行高。

现在它开始变得有点棘手......

第 4 项

.item4 {
    height: 490px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
}

项目 4 设置为总共四行：

grid-row-start: 1 / grid-row-end: 5

它的高度为 490px。

但项1,2和3被设置为跨越总共3行：

grid-row-start: 1 / grid-row-end: 4

...它们的总高度为：430px（30px + 100px + 300px）

因此，项目 4 创建一个高度为 30px（490px - 430px - 30px 网格行间距）的新行。

第 5 项

.item5 {
    height: 160px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 6;
}

项目 5 的高度为 160 像素，并设置为跨越两行。它从第四行（由 Item 4 创建）开始并创建一个新的第五行。

因为行高设置为auto，所以每行接收网格项高度的相等分布，如覆盖多个轨道的网格区域的规范中所定义。这使得第 4 行和第 5 行各 80 像素高。

重要提示：请注意第 5 行等高行如何扩展第 4 行，该行现在与第 4 项底部的原始位置间隔开。第一个间隙已创建。

第 6 项

.item6 {
    height: 520px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 7;
}

项目 6 设置为从第 5 行开始。如上所述（请参阅重要信息），第 5 行不再适合项目 4，因为grid-auto-rows: auto在项目 5 网格区域上。这会导致 Item 6 上方有 50px 的差距。

80px height of row 4 - 30px excess of Item 4 = 50px

但是现在 Item 6 增加了 Item 5 创建的第 5 行的 80px 高度。第二个间隙已经创建。

第 7 项

.item7 {
    height: 300px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;
}

最后两行的高度由以下三个因素决定：

• Item 5 的高度，第 5 行为 80px
• Item 6的高度，即520px，与第5行的高度相结合，跨越两行
• Item 7 的高度，为 300px，跨 1 行

出于同样的原因，网格行线 5与项目 4 间隔开，网格行线 6与项目 5 间隔开：auto行高是将项目 6 的高度分布在它所覆盖的行中。

一个解决方案

不要将高度设置为 Grid Items，而是考虑设置grid-auto-rows为 10px 之类的值。然后使用span关键字创建您想要的网格区域。

所以，而不是这个......

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item5 {
  height: 160px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
}

考虑一下：

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* new */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item5 {
  /* height: 160px; */
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;     /* this would have to be adjusted, as well */
  grid-row-end: span 16; /* new */
}

此处介绍了此方法：仅使用 CSS 的砌体布局，但元素水平排列