2

我最近一直在玩 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不存在的。这是小提琴：

小提琴

希望我说得有道理！

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

4

1 回答 1

3

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

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

但是您在一个块容器中声明grid-gapand两个.upper兄弟.lower姐妹。它们的父级 ( ) 不是网格容器，因为它没有or 。.griddisplay: gridinline-grid

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

和grid-gap: 10pxon.lower正在创建一个 10px 的排水沟......什么都没有（.lower只有一个网格项目。grid-gap在多个网格项目之间创建排水沟）。

小提琴演示 1

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

小提琴演示 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>

于 2017-04-12T11:59:40.823 回答