使用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 gridorder属性。您可以通过用数值说明顺序来简单地定义元素出现的顺序。

定义要显示的容器元素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>

Answer 2

CSS网格提供了实现您的布局，包括多种方法基于行的布局，网格区和该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演示