css网格fr单元无法正确显示

Question

当我在谷歌浏览器中打开以下代码时，标题和signIn选择器的跨度比.create选择器的长度要长得多，即使它们都应该跨越一列。谁会想到可能导致这种情况的原因？谢谢

grid {
display: grid;
height: 1800px;
border: 2px blue solid;
grid-template: 1fr 1fr 1fr 7fr / repeat(8, 1fr);
}

header {
grid-row-start: 1;
grid-row-end: 2;
border: solid red 2px;
}
.signIn {
grid-row-start: 1;
grid-row-end: 2;
border: solid blue 2px;

}
.create {
grid-row-start:3;
grid-row-end:4;
border: solid blue 2px;
}

Answer 1

标题和签名你正在给予

grid-row-start: 1;
grid-row-end: 2;

在哪里.create

grid-row-start:3;
grid-row-end:4;

因此，如果您希望创建更小或相同，则需要为其提供小的或类似的row-start和r ow-end值