时间戳

首页 > 解决方案 > CSS Grid：grid-row 在 Chrome 浏览器中不起作用

css - CSS Grid：grid-row 在 Chrome 浏览器中不起作用

问题描述

我已经列出了像砖石一样具有固定高度的 div。该代码适用于 Firefox，但不适用于 Chrome。我提到的参考代码是CSS-only masonry layout。

Chrome 浏览器 Mozilla 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: 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>

标签： cssgoogle-chromecss-grid

解决方案

由于您的所有人都是您span的乘数，5因此您可以尝试使用较小的数字来避免此错误并增加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>

您仍然可以减少更多：

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

推荐阅读