CSS网格：网格行无法在Chrome浏览器中使用 [英] CSS Grid: grid-row not working in Chrome browser

问题描述

我列出了具有固定高度（例如砌体）的div。该代码适用于Firefox，但不适用于Chrome。
我引用的参考代码是
Mozila Firefox浏览器

  .container {width：1080px; margin：0 auto;}。grid-container {display：grid; grid-auto-rows：1px; grid-template-columns：repeat（auto-fill，minmax（280px，1fr））;}。grid-item {display：flex; align-items：居中;证明内容：中心；边框：1px实线； font-size：50px;边距：5像素；}。grid-row-200 {网格行：span 200；}。grid-row-225 {网格行：span 225；}。grid-row-250 {网格行：span 250；} .grid-row-275 {网格行：span 275;}。grid-row-300 {网格行：span 300;}。grid-row-350 {网格行：span 350;}  

 < div class = container> < div class = grid-container> < div class = grid-item grid-row-200> 200px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-225> 225px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-225> 225px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-225> 225px< / div> < / div>< / div>  

解决方案

由于您所有跨度都是 5 的乘数，因此您可以尝试使用较小的数字避免出现此 bug 并增加 grid-auto-rows

  .container {width：1080px; margin：0 auto;}。grid-container {display：grid; grid-auto-rows：5px; grid-template-columns：repeat（auto-fill，minmax（280px，1fr））;}。grid-item {display：flex; align-items：居中;证明内容：中心；边框：1px实线； font-size：50px;边距：5像素；}。grid-row-200 {网格行：跨度40；}。grid-row-225 {网格行：跨度45；}。grid-row-250 {网格行：跨度50；} .grid-row-275 {网格行：span 55;}。grid-row-300 {网格行：span 60;}。grid-row-350 {网格行：span 70;}  

 < div class = container> < div class = grid-container> < div class = grid-item grid-row-200> 200px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-225> 225px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-225> 225px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-225> 225px< / div> < / div>< / div>  

您仍然可以减少更多：

  .container {width：1080px; margin：0 auto;}。grid-container {display：grid; grid-auto-rows：25px; grid-template-columns：repeat（auto-fill，minmax（280px，1fr））;}。grid-item {display：flex; align-items：居中;证明内容：中心；边框：1px实线； font-size：50px;边距：5像素；}。grid-row-200 {网格行：span 8；}。grid-row-225 {网格行：span 9；}。grid-row-250 {网格行：span 10；} .grid-row-275 {网格行：span 11;}。grid-row-300 {网格行：span 12;}。grid-row-350 {网格行：span 14;}  

 < div class = container> < div class = grid-container> < div class = grid-item grid-row-200> 200px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-225> 225px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-225> 225px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-300> 300px< / div> < div class = grid-item grid-row-250> 250px< / div> < div class = grid-item grid-row-275> 275px< / div> < div class = grid-item grid-row-350> 350px< / div> < div class = grid-item grid-row-225> 225px< / div> < / div>< / div>  

I've listed the div which has a fixed height like masonry. The code works in Firefox, but not in Chrome. The reference code I've referred is CSS-only masonry layout.

Chrome Browser Mozila Firefox Browser

.container {
  width: 1080px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-auto-rows: 1px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  font-size: 50px;
  margin: 5px;
}

.grid-row-200 {
  grid-row: span 200;
}

.grid-row-225 {
  grid-row: span 225;
}

.grid-row-250 {
  grid-row: span 250;
}

.grid-row-275 {
  grid-row: span 275;
}

.grid-row-300 {
  grid-row: span 300;
}

.grid-row-350 {
  grid-row: span 350;
}

<div class="container">
  <div class="grid-container">
    <div class="grid-item grid-row-200">200px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-225">225px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-225">225px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-225">225px</div>
  </div>
</div>

解决方案

Since all your span are a multiplier of 5 you can try to use lower numbers to avoid this bug and increase the grid-auto-rows

.container {
  width: 1080px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-auto-rows: 5px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  font-size: 50px;
  margin: 5px;
}

.grid-row-200 {
  grid-row: span 40;
}

.grid-row-225 {
  grid-row: span 45;
}

.grid-row-250 {
  grid-row: span 50;
}

.grid-row-275 {
  grid-row: span 55;
}

.grid-row-300 {
  grid-row: span 60;
}

.grid-row-350 {
  grid-row: span 70;
}

<div class="container">
  <div class="grid-container">
    <div class="grid-item grid-row-200">200px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-225">225px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-225">225px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-225">225px</div>
  </div>
</div>

You can still decrease more:

.container {
  width: 1080px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-auto-rows: 25px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  font-size: 50px;
  margin: 5px;
}

.grid-row-200 {
  grid-row: span 8;
}

.grid-row-225 {
  grid-row: span 9;
}

.grid-row-250 {
  grid-row: span 10;
}

.grid-row-275 {
  grid-row: span 11;
}

.grid-row-300 {
  grid-row: span 12;
}

.grid-row-350 {
  grid-row: span 14;
}

<div class="container">
  <div class="grid-container">
    <div class="grid-item grid-row-200">200px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-225">225px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-225">225px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-300">300px</div>
    <div class="grid-item grid-row-250">250px</div>
    <div class="grid-item grid-row-275">275px</div>
    <div class="grid-item grid-row-350">350px</div>
    <div class="grid-item grid-row-225">225px</div>
  </div>
</div>

这篇关于CSS网格：网格行无法在Chrome浏览器中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！