使用CSS网格重新排序项目

Question

到目前为止，我将使用CSS Grid迈出第一步，到目前为止，已经使用Bootstrap plus Javascript编写了网格。我想从一开始就知道非常简单，如果我知道如何做的话。

假设我有一些这样的HTML：

<div class="container">
 <div id="a">Blah</div>
 <div id="b">Blurgh</div>
</div>

1. 在台式机上，我需要2列布局，左侧的块a，右侧的块b。
2. 在移动设备上（使用媒体查询），我想要一列，而块b在块a上方（因此，不正常）。

那我该怎么办？

Answer 1

CSS Grid提供了多种方法来实现布局，包括基于行的放置，网格区域和 order属性 。我将在下面发布前两个示例。

Line-based placement

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  grid-gap: .5em;
  padding: .5em;
  border: 1px solid black;
}

@media ( max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 50px 50px;
  }
  #b {
    grid-row: 1;
  }
}

/* non-essential decorative styles */
#a     { background-color: lightgreen; }
#b     { background-color: orange; }
#a, #b { display: flex; align-items: center; justify-content: center; font-size: 1.5em; }

<div class="container">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

jsFiddle demo

---

grid-template-areas

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  grid-gap: .5em;
  padding: .5em;
  border: 1px solid black;
  grid-template-areas: " a b ";
}

#a { grid-area: a; }
#b { grid-area: b; }

@media ( max-width: 600px) {
  .container {
    grid-template-areas: " b " " a ";
    grid-template-columns: 1fr;
    grid-template-rows: 50px 50px;
  }
}

/* non-essential decorative styles */
#a     { background-color: lightgreen; }
#b     { background-color: orange; }
#a, #b { display: flex; align-items: center; justify-content: center; font-size: 1.5em; }

<div class="container">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

jsFiddle demo