在尝试了解有关 CSS 网格的更多信息时，我尝试创建一些不同的网格布局。我试图创建的内容如下：
这是其中的一个步骤：
.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-end设置到大盒子结束的地方。这会导致框恢复到默认大小：
.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>
我不知道为什么会发生这种情况。如果有人能帮助我理解为什么会发生这种情况，我将不胜感激。
请注意您的用法grid-row-start and grid-column-end- 他们指的是网格线。这里有 8 列 - 所以网格线编号从 0 到 9。请参阅下面更正的演示：
.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>
来到差异当你span the first-column到不同的行，因为您只指定了1fr对于每一行，您没有设置高度网格容器，这将需要一个height认为网格布局算法认为合适。
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 https://www.w3.org/TR/css-grid-1/#fr-unit- 上面的强调是我的。
在第一种情况下，第一列和第三列的高度比为 3:1，而第二列延伸 6 行。 （这1 in the 3:1 比例盒子的高度与其内容一样多）
第二种情况也是如此，但是第一列和第三列的高度比为 3:3，而第二列延伸 6 行。第一列和第三列的比率可以简化为 1:1，第二列的比率可以简化为 2。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
