CSS网格在Google Chrome浏览器中显示不正确

Question

我正在使用CSS Grid布局以具有3列布局。即使我已经提到list1跨3行，但list1仅跨1行。

.wrapper {
  max-width: 940px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}

.wrapper>div {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  padding: 1em;
  color: #5a2916;
}

.item1 {
  -ms-grid-column: 1;
  grid-column-start: 1;
  grid-column-end: 4;
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item2 {
  -ms-grid-column: 1;
  grid-column-start: 1;
  -ms-grid-row: 3;
  grid-row-start: 3;
  grid-row-end: 5;
}

<div class="wrapper">
  <div class="item1">One</div>
  <div class="item2">Two</div>
  <div class="item3">Three</div>
  <div class="item4">Four</div>
  <div class="item5">Five</div>
</div>

请让我知道我要去哪里错了。

Answer 1

向网格添加grid-auto-rows属性。像：

 grid-auto-rows: 50px;

.wrapper {
  max-width: 940px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
}

.wrapper>div {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  padding: 1em;
  color: #5a2916;
  
}

.item1 {
  -ms-grid-column: 1;
  grid-column-start: 1;
  grid-column-end: 4;
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item2 {
  -ms-grid-column: 1;
  grid-column-start: 1;
  -ms-grid-row: 3;
  grid-row-start: 3;
  grid-row-end: 5;
}

<div class="wrapper">
  <div class="item1">One</div>
  <div class="item2">Two</div>
  <div class="item3">Three</div>
  <div class="item4">Four</div>
  <div class="item5">Five</div>
</div>

Answer 2

我认为您应该在包装器类定义中添加希望包装器跨越多少行。当我添加此grid-template-rows: repeat(5, 1fr);时，item1从一排变为三排。