设置CSS网格中第一行的高度

Question

我有一个使用display: grid的基本CSS网格display: grid ＆我无法使用grid-template-rows设置第一行的高度。

我的HTML / CSS看起来大致如下：

 .gridWrapper { display: grid; height: 100vh; grid-template-rows: 20px auto auto; } .row1 { grid-row-end: 1; background-color: lightslategray; } .row2 { grid-row-end: 2; background-color: lightblue; } .row3 { grid-row-end: 3; background-color: lightskyblue; } .col1 { grid-column-end: 1; } .col2 { grid-column-end: 2; } 

 <div class="gridWrapper"> <div class="row1 col1">Col1</div> <div class="row1 col2">Col2</div> <div class="row2 col1">A</div> <div class="row2 col2">B</div> <div class="row3 col1">D</div> <div class="row3 col2">D</div> </div> 

但是，结果如下：

这种情况发生在最新的Chrome和Safari（我在Mac上），这让我相信我误解了一些关于gridlayout CSS的东西。

如何设置第一行的高度？

Answer 1

您正在定义grid-row-end属性，但是您正在使用grid-row-start行。 这就是为什么事情没有像你期望的那样发挥作用。

如果你想要.row1元素覆盖第一行，那么你需要它们跨越整行 - 这意味着从第1行到第2行。

所以不是这样的：

• grid-row-end: 1

使用以下任何一个：

• grid-row-start: 1
• grid-row-end: 2
• grid-row: 1 / 2

 .gridWrapper { display: grid; height: 100vh; grid-template-rows: 20px auto auto; } .row1 { /* grid-row-end: 1; */ grid-row-end: 2; /* new */ background-color: lightslategray; } .row2 { /* grid-row-end: 2; */ grid-row-end: 3; /* new */ background-color: lightblue; } .row3 { /* grid-row-end: 3; */ grid-row-end: 4; /* new */ background-color: lightskyblue; } .col1 { /* grid-column-end: 1; */ grid-column-end: 2; /* new */ } .col2 { /* grid-column-end: 2; */ grid-column-end: 3; /* new */ } 

 <div class="gridWrapper"> <div class="row1 col1">Col1</div> <div class="row1 col2">Col2</div> <div class="row2 col1">A</div> <div class="row2 col2">B</div> <div class="row3 col1">D</div> <div class="row3 col2">D</div> </div> 

Answer 2

问题是 - grid-column-end （ MDN ）可能有点误导。 你的例子中的row1应该有grid-column-end: 2; 而不是grid-column-end: 1; 。

要解决此问题，您只需在每个grid-column-end和grid-row-end属性中添加1即可。

这是带有固定值的代码段：

 body { margin: 0; } .gridWrapper { display: grid; height: 100vh; grid-template-rows: 20px auto auto; } .row1 { grid-row-end: 2; background-color: lightslategray; } .row2 { grid-row-end: 3; background-color: lightblue; } .row3 { grid-row-end: 4; background-color: lightskyblue; } .col1 { grid-column-end: 2; } .col2 { grid-column-end: 3; } 

 <div class="gridWrapper"> <div class="row1 col1">Col1</div> <div class="row1 col2">Col2</div> <div class="row2 col1">A</div> <div class="row2 col2">B</div> <div class="row3 col1">D</div> <div class="row3 col2">D</div> </div> 

另外 - 我不认为这里需要grid-column-end 。 只使用grid-column和grid-row属性（在我看来，这样做不那么令人困惑），您可以获得相同的结果。

 body { margin: 0; } .gridWrapper { display: grid; height: 100vh; grid-template-rows: 20px auto auto; } .row1 { grid-row: 1; background-color: lightslategray; } .row2 { grid-row: 2; background-color: lightblue; } .row3 { grid-row: 3; background-color: lightskyblue; } .col1 { grid-column: 1; } .col2 { grid-column: 2; } 

 <div class="gridWrapper"> <div class="row1 col1">Col1</div> <div class="row1 col2">Col2</div> <div class="row2 col1">A</div> <div class="row2 col2">B</div> <div class="row3 col1">D</div> <div class="row3 col2">D</div> </div>