使用CSS Grid重新排列项目

Question

我将要开始学习CSS Grid，之前一直使用Bootstrap和Javascript制作网格。我想从一个非常简单的例子开始，如果我知道如何做就好了。

例如，我有以下HTML代码：

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

1. 在桌面上，我想要一个两列布局，左侧是块a，右侧是块b。
2. 在移动设备上（使用媒体查询），我想要单列布局，块b在块a之上（也就是不按照正常顺序排列）。

那么我需要做什么？

- John Moore

Answer 1

我认为最简单的方法是使用CSS网格order属性。您可以通过指定数字值的顺序来定义元素的出现顺序。

定义容器元素以显示grid，然后根据屏幕大小设置grid template columns并设置每个项目的order。

更改屏幕大小以在移动设备/桌面上查看结果：

.container {
  display: grid;
  grid-template-columns: auto auto; /* make each item sit side by side */
}

#a {
  background-color:green;
}

#b {
  background-color: orange;
}
  
@media only screen and (max-width: 600px) {
  .container {
    display: grid;
    grid-template-columns: 100%; /* make each item span full width */
  }

  #a {
    order: 2; /* set this to appear second */
  }

  #b {
    order: 1; /* set this to appear first */
  }
}

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

- Jonny

Answer 2

CSS Grid 提供多种方法来实现布局，包括基于行的放置、网格区域和 order 属性。以下是前两种方法的示例。

基于行的放置

.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示例

---

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演示

- Michael Benjamin

---

我使用了“grid-template-areas”解决方案，它运行良好。我认为如果我将来有其他的布局要求，我可以轻松地扩展它。是否有一种有效的方法可以在这种无序布局之后切换回默认顺序，以便桌面上的后续块从左到右放置在两列中，在移动设备上则在单列中放置。或者我必须使用grid-template-area指定所有内容？ - John Moore

非常好的答案，它也帮助了我。 - Signcodeindie