消除CSS网格中的巨大空白 [英] Remove wide gaps in CSS Grid
问题描述
我使用CSS网格进行了设计，这在行之间给了我意外的空间。我用以下代码重现了我的问题：
main {display：grid; grid-template-columns：repeat（3，1fr）; grid-column-gap：10px; grid-row-gap：10px;}文章{背景：红色；}。item1 {高度：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>
在这里您可以在底部项目的顶部看到额外的空隙。
我发现了一个类似的问题-
很简单。项目1跨越第一列和第一行。高度为30px，用于设置行高。
项目2
.item2 {
高度：100px;
grid-column-start：1；
grid-column-end：2;
grid-row-start：2;
grid-row-end：3;
}
同样，非常简单。项目2跨越第一列和第二行。高度为100像素，用于设置行高。
项目3
.item3 {
高度：300像素；
grid-column-start：1；
grid-column-end：2;
grid-row-start：3;
grid-row-end：4;
}
与上面的两个项目一样，项目3清晰而简单。它跨越第一列和第三行。它的高度是300px，它设置行的高度。
现在开始变得有些棘手...
项目4
.item4 {
高度：490px ;
grid-column-start：2；
grid-column-end：3;
grid-row-start：1;
grid-row-end：5;
}
项目4设置为总共四行：
网格行-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 {
高度：160px；
grid-column-start：1；
grid-column-end：2;
grid-row-start：4;
grid-row-end：6;
}
项目5的高度为160px，并设置为跨越两行。它从第四行（由第4项创建）开始，并创建新的第五行。
因为行高设置为 auto ，则每一行均以
第6项设置为从第5行开始。如上所述（请参见重要），由于<$，第5行不再适合第4行c $ c> grid-auto-rows：在项目5网格区域上自动。 这导致第6项上方有50px的间隙。
第4行80px的高度-超出了30px项目4 = 50px
但是现在项目6添加到项目5创建的第5行的80px高度。 第二个差距已创建。
项目7
.item7 {
高度：300像素；
grid-column-start：1；
grid-column-end：2;
grid-row-start：6;
grid-row-end：7;
}
最后两行的高度由以下三个因素决定：
- 高度项目5的高度（在第5行中为80px）
- 项目6的高度（在520px中）与行5的高度相结合并跨越两行
- 第7项的高度为300px，跨1行
出于与网格行相同的原因第5行与项目4隔开，网格第6行与项目5隔开： auto 行高分布
一种解决方案
考虑将 grid-auto-rows 设置为10px，而不是设置Grid Items的高度。然后使用 span 关键字创建所需的网格区域。
因此，代替此方法...
main {
display：grid;
grid-template-columns：repeat（3，1fr）;
grid-column-gap：10px;
grid-row-gap：10px;
}
.item5 {
高度：160像素；
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; / *新* /
grid-column-gap：10px;
grid-row-gap：10px;
}
.item5 {
/ *高度：160像素； * /
grid-column-start：1;
grid-column-end：2;
grid-row-start：4; / *这也必须进行调整* /
grid-row-end：span 16; / *新* /
}
此处介绍了此方法：仅CSS的砌体布局，但元素水平排列
I made a design using css grids which gave me unexpected space between rows. I reproduced my issue with the following code:
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>
Here you can see extra gap on top of the bottom items.
I found a similar question -- Why does CSS Grid layout add extra gaps between cells? -- where the extra gap was caused by figures and solved using display: flex on the figures, but that didn't work for me.
Any idea?
EDIT:
My example was misleading, here is a closer-to-the-real-problem version:
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>
Here you can see extra gap in red. The heights on the contained div are just here to simulate the real content of the articles, so they can't be modified in the real example (they are left to default in the real code). Based on the pre-edit answers, I tried grid-auto-rows property, but it didn't solve the problem.
You have a grid container with three explicit columns and 10px gutters:
main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
There are no rows defined. All rows are implicit and take content height (because a default setting of a grid container is grid-auto-rows: auto).
Inside this container are seven grid items that are positioned using line-based placement.
Let's break this down to individual pieces.
Item 1
.item1 {
height: 30px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
Simple enough. Item 1 spans across the first column and first row. It is 30px in height, which sets the row height.
Item 2
.item2 {
height: 100px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
Again, pretty straightforward. Item 2 spans across the first column and second row. It is 100px in height, which sets the row height.
Item 3
.item3 {
height: 300px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
Like the two items above, Item 3 is clear and simple. It spans across the first column and third row. It is 300px in height, which sets the row height.
Now it starts to get a bit tricky...
Item 4
.item4 {
height: 490px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5;
}
Item 4 is set to span a total of four rows:
grid-row-start: 1 / grid-row-end: 5
It has a height of 490px.
But items 1, 2 & 3 are set to span a total of three rows:
grid-row-start: 1 / grid-row-end: 4
...and their total height is: 430px (30px + 100px + 300px)
Therefore, Item 4 creates a new row with a height of 30px (490px - 430px - 30px grid row gaps).
Item 5
.item5 {
height: 160px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 6;
}
Item 5 has a height of 160px and is set to span two rows. It starts at the fourth row (which was created by Item 4) and creates a new fifth row.
Because row heights are set to auto, each row receives an equal distribution of the height of the grid item, as defined in the spec for grid areas that cover multiple tracks. This makes rows 4 and 5 each 80px tall.
Important: Notice how Item 5 equal height rows expand row 4, which is now spaced away from its original position at the bottom of Item 4. The first gap has been created.
Item 6
.item6 {
height: 520px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 7;
}
Item 6 is set to start at row 5. As explained above (see Important), row 5 can no longer be fitted to Item 4 because of grid-auto-rows: auto on the Item 5 grid area. This results in a 50px gap above Item 6.
80px height of row 4 - 30px excess of Item 4 = 50px
But now Item 6 adds to the 80px height of row 5 created by Item 5. The second gap has been created.
Item 7
.item7 {
height: 300px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 6;
grid-row-end: 7;
}
The height of the last two rows is determined by the following three factors:
- the height of Item 5, which is 80px in row 5
- the height of Item 6, which is 520px, which combines with the height of row 5 and spans two rows
- the height of Item 7, which is 300px and spans 1 row
For the same reason that grid row line 5 is spaced away from Item 4, grid row line 6 spaces away from Item 5: The auto row height is distributing the height of Item 6 among the rows it covers.
One Solution
Instead of setting heights to Grid Items, consider setting grid-auto-rows to something like 10px. Then use the span keyword to created the grid areas you want.
So instead of this...
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;
}
consider this:
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 */
}
This approach is covered here: CSS-only masonry layout but with elements ordered horizontally
这篇关于消除CSS网格中的巨大空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
