html - 为什么 grid-gap 在移动设备上不起作用？

Question

我最近一直在研究 CSS Grid，并注意到一些我无法找到答案的东西。假设我将页面分成两列，然后在其下面一行，另一列(跨越两列)。在移动设备上，我希望它们将一个堆叠在另一个之上，然后在某个断点后返回到上述布局。这是标记:

HTML

<div class="grid">
  <div class="upper">
    <div class="a">A</div>
    <div class="b">B</div>
  </div>
  <div class="lower">
    <div class="c">C</div>
  </div>
</div>

SCSS

.upper, .lower {
  display: grid;
}

.upper {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  background-color:grey;
  grid-gap:10px;

  @media only screen and (max-width:800px) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

.lower {
  grid-template-columns: 1fr;
  grid-template-rows:auto;
  background-color: green;
  grid-gap:10px;
}

我注意到在移动设备上，即使我已经定义了 grid-gap对于我的两个网格部分，在移动设备上，当列堆叠时，grid-gap不维护。因此，在下面的 fiddle 中，当您缩小窗口时，您可以看到当列将一个堆叠在另一个之上时， B 之间的间隙和C是不存在的。这是 fiddle :

<强> Fiddle

希望我说得有道理!

编辑:请记住，我仅在 Firefox 和 Chrome(支持网格)中测试此功能。

Answer 1

grid-gap 规则在 B 和 C 之间不起作用，因为它不适用。

此规则在网格容器内的行和列之间创建间距。

但是您在 .upper 和 .lower 上声明 grid-gap，这两个 sibling 在一个 block 容器。它们的父级 (.grid) 不是网格容器，因为它没有 display: grid 或 inline-grid。

因此，.upper 上的 grid-gap: 10px 在 A 和 B 之间创建了 10px 的间距...

和 .lower 上的 grid-gap: 10px 正在创建一个 10px 的间距.... 没有 (.lower 只有一个网格项。grid-gap 在多个网格项之间创建间距。

fiddle demo 1

要使 grid-gap 在 .upper 和 .lower sibling 中工作，您需要将其应用到其父级，该父级必须是一个网格容器。

fiddle demo 2

.grid {
  display: grid;    /* NEW */
  grid-gap: 25px;   /* NEW */
}

.upper, .lower {
  display: grid;
}

.upper {
  grid-template-columns: 1fr 1fr;
  grid-gap: 25px;
}

.lower {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 10px; /* does nothing unless there are multiple grid items */
}

@media ( max-width:800px ) {
  .upper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

.upper > * { border: 1px dashed red;  }
.lower > * { border: 1px dashed blue; }

<div class="grid">

  <div class="upper">
    <div class="a">A</div>
    <div class="b">B</div>
  </div>

  <div class="lower">
    <div class="c">C</div>
  </div>

</div>