Сетка CSS не отображается неправильно в браузере Google Chrome

Question

Я использую CSS Grid layout, чтобы иметь 3 колонки. Несмотря на то, что я упомянул list1, чтобы охватить 3 строки, list1 охватывает только одну строку.

.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 прошел от одной до трех строк.