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

时间:2018-12-01 18:25:33

标签: html css css3 grid-layout css-grid

我有一个使用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>

但是,结果如下:

2nd row gets styled, rather than 1st

这在最新的Chrome和Safari(我在Mac上)中都发生,这使我相信我对网格布局CSS有误解。

如何设置第一行的高度?

2 个答案:

答案 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-endMDN)可能会引起误解。您示例中的row1应该具有grid-column-end: 2;而不是grid-column-end: 1;

要解决此问题,您只需向每个1grid-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-columngrid-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>