CSS网格在Google Chrome浏览器中显示不正确 [英] CSS grid displaying incorrectly in Google Chrome browser

问题描述

我正在使用CSS Grid布局以具有3列布局.即使我已经提到 list1 跨越三行，但 list1 却仅跨越一行.

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.

推荐答案

向网格中添加 grid-auto-rows 属性.喜欢:

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>

这篇关于CSS网格在Google Chrome浏览器中显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！