无法使用CSS网格实现网格布局 [英] Can't achieve grid layout with CSS grid
问题描述
在尝试了解有关CSS网格的更多信息时，我试图创建一些不同的网格布局。我尝试创建的是以下内容：
In trying to learn more about CSS grid, I am trying to create some different grid layouts. The one I am trying to create is the following:
这是其中的一步：
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(8, 1fr);
}
.wrapper .first_box {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 7;
}
.wrapper .second_box {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
}
.wrapper .third_box {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 4;
}
.wrapper .fourth_box {
grid-column-start: 1;
grid-column-end: 2;
}
.wrapper .fifth_box {
grid-column-start: 4;
grid-column-end: 5;
}
.wrapper div {
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div class="first_box">
First Box
</div>
<div class="second_box">
Second Box
</div>
<div class="third_box">
Third Box
</div>
<div class="fourth_box">
Fourth Box
</div>
<div class="fifth_box">
Fifth Box
</div>
</div>
此时，前两个框看起来很正确。问题是当我尝试设置左下角框和右下角框的行时。对于这两个框，我都将 grid-row-start 设置为左上角和右上角框的结束位置，并且我有 grid-row-结束设置为大框的结束位置。这会使框恢复为默认大小：
At this point, the first two boxes look correct. The problem is when I try to set the rows for the bottom left box and the bottom right box. For both of these boxes, I have grid-row-start set to where the upper left and upper right boxes end and I have grid-row-end set to where the big box ends. This causes the boxes to go back to their default size:
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(8, 1fr);
}
.wrapper .first_box {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 7;
}
.wrapper .second_box {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
}
.wrapper .third_box {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 4;
}
.wrapper .fourth_box {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 7;
}
.wrapper .fifth_box {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 7;
}
.wrapper div {
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div class="first_box">
First Box
</div>
<div class="second_box">
Second Box
</div>
<div class="third_box">
Third Box
</div>
<div class="fourth_box">
Fourth Box
</div>
<div class="fifth_box">
Fifth Box
</div>
</div>
I我不确定为什么会这样。如果有人可以帮助我理解为什么会发生，我将不胜感激。
I'm not sure why this happens. I would appreciate if someone could help my understand why this happens.
推荐答案
请注意您使用的 grid- row-start 和 grid-column-end -它们是指网格线。您在此处有8列-因此网格线的编号从0到9。请参见下面的更正演示：
Note your usage of grid-row-start and grid-column-end - they refer to grid lines. You have 8 columns here - so grid lines are numbered from 0 to 9. See corrected demo below:
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(8, 1fr);
}
.wrapper .first_box {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 9; /* CHANGED */
}
.wrapper .second_box {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 5; /* CHANGED */
}
.wrapper .third_box {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 5; /* CHANGED */
}
.wrapper .fourth_box {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5; /* CHANGED */
grid-row-end: 9; /* CHANGED */
}
.wrapper .fifth_box {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 5; /* CHANGED */
grid-row-end: 9; /* CHANGED */
}
.wrapper div {
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 1em;
color: #d9480f;
}
<div class="wrapper">
<div class="first_box">
First Box
</div>
<div class="second_box">
Second Box
</div>
<div class="third_box">
Third Box
</div>
<div class="fourth_box">
Fourth Box
</div>
<div class="fifth_box">
Fifth Box
</div>
</div>
跨度 第一列会出现差异行，因为您只为每行指定了 1fr ，而您没有为网格容器设置高度，它将花费< 网格布局算法认为合适的code> height 。
但是，如果您看得很近，您会看到一种模式-最小的盒子只占据与其内容一样多的空间。因此，我们可以在这里讨论比率。
Coming to the differences when you span the first-column to different rows, as you have only specified 1fr for each row and you don't have a height set for the grid container, it will take a height that the grid layout algorithm sees fit.
But if you see closely you can see a pattern - the smallest box is occupying only as much space as its content. So we can talk ratios here.
发生剩余空间的分布在所有非弹性路径
的尺寸调整功能都达到最大值之后。从可用空间中减去此类
行或列的总大小，得到
剩余空间，然后将其按比例分成弹性大小的行和
列他们的弹性系数。
MDN -以上是我的重点。
在第一种情况下，，第一和第三列的高度比例为3：1，而第二列则延伸6行。 （ 3：1比例中的 1 是高度与其内容相同的盒子）
In the first case, the first and third column has a 3:1 ratio of heights while the second column extends 6 rows. (the 1 in the 3:1 ratio is the box taking height as much as its content)
与第二种情况类似，但是第一和第三列的高度比例为3：3，而第二列则延伸6行。第一和第三列的比率可以简化为1：1，第二列的比率可以简化为2。
Similarly in the second case, however the first and third column has 3:3 ratio of heights while the second column extends 6 rows. The ratio can simplify to 1:1 for the first and third and 2 for the second column.
这篇关于无法使用CSS网格实现网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
