我有一个使用display: grid
的基本CSS网格,并且无法使用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上)中都发生,这使我相信我对网格布局CSS有误解。
如何设置第一行的高度?
答案 0 :(得分: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>
答案 1 :(得分:0)
问题是-grid-column-end
(MDN)可能会引起误解。您示例中的row1
应该具有grid-column-end: 2;
而不是grid-column-end: 1;
。
要解决此问题,您只需向每个1
和grid-column-end
属性添加grid-row-end
。
以下是固定值的代码段:
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>