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不会被维护。因此，在下面的小提琴中，当您使窗口变小时，您可以看到当列，一个堆叠在另一个上面时，B和C之间的间隙不存在。这是小提琴：

Fiddle

希望我有意义！

编辑：请记住，我只是在Firefox和Chrome（支持网格）中测试它。

Answer 1

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

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

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

因此，grid-gap: 10px .upper正在A和B之间创建一个10px的装订线......

和grid-gap: 10px .lower正在创建一个10px的装订线.... 没有（.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>

为什么电网间隙不适用于移动设备？

1 个答案: