无法使用CSS网格实现网格布局 [英] Can't achieve grid layout with CSS grid
问题描述
在尝试了解有关CSS网格的更多信息时，我试图创建一些不同的网格布局.我尝试创建的是以下内容:
这是其中的一步:
.wrapper {显示:网格；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；网格行末端:4；}.wrapper .third_box {grid-column-start:4；grid-column-end:5；grid-row-start:1；网格行末端: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 {边框:2px实心rgb(233,171,88);border-radius:5px;background-color:rgba(233,171,88，.5);填充:1em；颜色:#d9480f;} < div class ="wrapper">< div class ="first_box">第一盒</div>< div class ="second_box">第二箱</div>< div class ="third_box">第三箱</div>< div class ="fourth_box">第四盒</div>< div class ="fifth_box">第五盒</div></div> 在这一点上，前两个框看起来正确.问题是当我尝试设置左下角框和右下角框的行时.对于这两个框，我将 grid-row-start 设置为左上和右上框的结束位置，将 grid-row-end 设置为大盒子结束了.这将使框恢复为默认大小:
.wrapper {显示:网格；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；网格行末端:4；}.wrapper .third_box {grid-column-start:4；grid-column-end:5；grid-row-start:1；网格行末端: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 {边框:2px实心rgb(233,171,88);border-radius:5px;background-color:rgba(233,171,88，.5);填充:1em；颜色:#d9480f;} < div class ="wrapper">< div class ="first_box">第一盒</div>< div class ="second_box">第二箱</div>< div class ="third_box">第三箱</div>< div class ="fourth_box">第四盒</div>< div class ="fifth_box">第五盒</div></div> 我不确定为什么会这样.如果有人可以帮助我理解为什么会发生，我将不胜感激.
请注意您对 grid-row-start 和 grid-column-end 的用法-它们是指网格线.您在此处有8列-因此网格线的编号从0到9.
.wrapper {显示:网格；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；/*更改*/}.wrapper .second_box {grid-column-start:1；grid-column-end:2；grid-row-start:1；网格行末端:5；/*更改*/}.wrapper .third_box {grid-column-start:4；grid-column-end:5；grid-row-start:1；网格行末端:5；/*更改*/}.wrapper .fourth_box {grid-column-start:1；grid-column-end:2；grid-row-start:5；/*更改*/grid-row-end:9；/*更改*/}.wrapper .fifth_box {grid-column-start:4；grid-column-end:5；grid-row-start:5；/*更改*/grid-row-end:9；/*更改*/}.wrapper div {边框:2px实心rgb(233,171,88);border-radius:5px;background-color:rgba(233,171,88，.5);填充:1em；颜色:#d9480f;} < div class ="wrapper">< div class ="first_box">第一盒</div>< div class ="second_box">第二箱</div>< div class ="third_box">第三箱</div>< div class ="fourth_box">第四盒</div>< div class ="fifth_box">第五盒</div></div> 将第一列跨到不同行时会出现差异，因为您仅指定了 1fr 每行，而您没有为 grid容器设置高度，它将采用 grid布局算法的 height 认为合适.
但是，如果您看得很近，您会看到一个图案-最小的盒子只占据与其内容一样多的空间.所以我们可以在这里讨论比率.
剩余的空间分布发生在所有非柔性轨道之后大小调整功能已达到最大.这样的总大小从可用空间中减去行或列，得出剩余空间，然后将其分配给各行大小灵活的行和列与它们的弹性系数成比例.
MDN -以上是我的重点./p>
在第一种情况下，第一列和第三列的高度比例为3:1，而第二列延伸6行.( 3:1比例中的 1 是高度与其内容相同的盒子)
与第二种情况类似，但是第一和第三列的高度比例为3:3，而第二列延伸6行.第一和第三列的比率可以简化为1:1，第二列的比率可以简化为2.
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:
Here is one step of this:
.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>
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'm not sure why this happens. I would appreciate if someone could help my understand why this happens.
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>
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.
The distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flex-sized rows and columns in proportion to their flex factor.
MDN - emphasis above is mine.
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)
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屋！
