CSS grid displaying incorrectly in Google Chrome browser

问题

I am using CSS Grid layout to have a 3 column layout. Even though I have mentioned the list1 to span across 3 rows, the list1 is only spanning one row.

.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>

Please let me know where I am going wrong.

回答1:

Add a grid-auto-rows property to your grid. Like:

 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>

回答2:

I think you ought to add in wrapper class definition how many rows you want your wrapper to span. When I added this grid-template-rows: repeat(5, 1fr); item1 went from one to three rows.

来源：https://stackoverflow.com/questions/52164623/css-grid-displaying-incorrectly-in-google-chrome-browser

标签

css

css-grid