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

Question

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

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 中，当您将 window 变小时，您可以看到当列堆叠在另一列之上时，B 和 [=15= 之间的差距] 不存在。这是 fiddle:

Fiddle

希望我说的有道理！

编辑：请记住，我只在 Firefox 和 Chrome（支持网格）中对此进行测试。

Answer 1

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

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

但是您要在 .upper 和 .lower 上声明 grid-gap， 块容器 中的两个兄弟姐妹。它们的父级 (.grid) 不是网格容器，因为它没有 display: grid 或 inline-grid.

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

和 .lower 上的 grid-gap: 10px 在...之间创建了一个 10px 的间距。nothing （.lower 只有一个网格项。 grid-gap 在多个网格项之间创建间距）。

fiddle demo 1

要让 grid-gap 在 .upper 和 .lower 兄弟姐妹之间工作，您需要将它应用到他们的父级，它必须是一个网格容器。

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>

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

Why does grid-gap not work on mobile?

html

css

css-grid