Изменение порядка элементов с помощью 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 (то есть, вне нормального порядка).

Так что мне нужно делать?

Answer 1

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