Изменить порядок столбцов в CSS-сетке

Я играю с сетками CSS.

Когда я просматриваю его на рабочем столе размером (min-width: 769px), у меня есть одна строка с 3 столбцами - примерно так:

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

Могу ли я с помощью css-grid перемещать столбцы, чтобы сделать что-то вроде этого на мобильном макете:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

Я знаю, что охватываю ячейки чем-то вроде этого:

.content{
  grid-column: 1 / span2;
}

Но я хочу изменить порядок столбцов. Могу ли я сделать это без препроцессора?

Вот мой текущий класс сетки:

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}

html css css-grid
person jwknz    schedule 28.07.2017    source источник
comment
CSS Grid, похоже, поддерживает order, используемый во flexbox. gridbyexample.com/examples/example23   -  person sol    schedule 28.07.2017
comment
Да, это работает, были проблемы с диапазоном столбцов, но теперь это тоже удалось.   -  person jwknz    schedule 28.07.2017
comment
Прохладный. Я не слишком хорошо знаком с сеткой, поэтому ничем не могу помочь ..   -  person sol    schedule 28.07.2017

Ответы (1)


arrow_upward
67
arrow_downward

Макет сетки предоставляет несколько методов для изменения расположения элементов сетки. Я перечислил четыре ниже.

  1. Свойство grid-template-areas
  2. Построчное размещение
  3. Свойство order
  4. Функция dense свойства grid-auto-flow. (Возможно, самое простое, легкое и надежное решение для этого типа макета, поскольку оно работает для любого количества элементов сетки.)

Вот оригинальный макет:

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 1

1. Свойство grid-template-areas

Свойство grid-template-areas позволяет упорядочивать макет с использованием визуального искусства ASCII.

Поместите имена областей сетки (которые определены для каждого элемента) в том месте, где вы хотите, чтобы они отображались.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
  grid-template-areas: "column-1 column-2 column-3";
}

grid-item:nth-child(1) { grid-area: column-1; }
grid-item:nth-child(2) { grid-area: column-2; }
grid-item:nth-child(3) { grid-area: column-3; }

@media ( max-width: 500px ) {  
  grid-container { 
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: " column-1 column-3 " 
                             " column-2 column-2 ";
   }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 2

Из спецификации:

7.3. Именованные области: свойство grid-template-areas

Это свойство определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на них можно ссылаться из свойств размещения в сетке.

Синтаксис свойства grid-template-areas также обеспечивает визуализацию структуры сетки, что упрощает понимание общей компоновки контейнера сетки.

Все строки должны иметь одинаковое количество столбцов, иначе объявление недействительно.

Если именованная область сетки охватывает несколько ячеек сетки, но эти ячейки не образуют один заполненный прямоугольник, объявление недействительно.

Примечание. Непрямоугольные или отдельные области могут быть разрешены в будущей версии этого модуля.

2. Построчное размещение

Используйте grid-row-start, grid-row-end, grid-column-start, grid-column-end или их сокращения, grid-row и grid-column, чтобы установить размер и положение элемента сетки в сетке.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; }
  grid-item:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { grid-row: 1 / 2; grid-column: 2 / 3; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 3

Из спецификации:

8.3. Построчное размещение: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end

3. Свойство order

Свойство order в Grid Layout выполняет те же функции, что и в Flex Layout.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { order: 1; }
  grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { order: 2; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle demo 3

Из спецификации:

6.3. Переупорядоченные элементы сетки: свойство order

4. Функция dense свойства grid-auto-flow.

Это решение, пожалуй, самое простое, легкое и надежное из всех представленных здесь, поскольку оно работает для любого количества элементов сетки.

Хотя это решение не дает каких-либо серьезных преимуществ перед тремя предыдущими в макете, описанном в вопросе, который состоит всего из трех элементов сетки, оно предлагает огромные преимущества, когда количество элементов сетки больше или динамически генерируемый.

Этот вопрос и приведенные выше решения касаются этого:

01  03
02  02

Но, допустим, нам это нужно:

01  03
02  02

04  06
05  05

07  09
08  08

10  12
11  11

and so on...

Используя grid-template-areas, размещение по строкам и order, решение потребовало бы большого количества жесткого кодирования (если бы мы знали общее количество элементов) и, возможно, настраиваемых свойств CSS и / или JavaScript (если элементы были созданы динамически).

Однако функция dense CSS Grid просто и легко справляется с обоими сценариями.

Применяя grid-auto-flow: dense к контейнеру, каждый третий элемент заполняет пустую ячейку, созданную в результате последовательного упорядочивания.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

@media (max-width: 500px) {
  grid-container {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;     /* KEY RULE; deactive to see what happens without it;
                                  defaults to "sparse" (consecutive ordering) value */
  }
  grid-item:nth-child(3n + 2) {
    grid-column: 1 / 3;
  }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(-n + 3)                    { background-color: aqua; }
grid-item:nth-child(n + 4):nth-child(-n + 6)   { background-color: lightgreen; }
grid-item:nth-child(n + 7):nth-child(-n + 9)   { background-color: orange; }
grid-item:nth-child(n + 10):nth-child(-n + 12) { background-color: lightgray; }
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>6</grid-item>
  <grid-item>7</grid-item>
  <grid-item>8</grid-item>
  <grid-item>9</grid-item>
  <grid-item>10</grid-item>
  <grid-item>11</grid-item>
  <grid-item>12</grid-item>
</grid-container>

jsFiddle demo 4

Из спецификации:

7.7. Автоматическое размещение: свойство grid-auto-flow

плотный

Если указано, алгоритм автоматического размещения использует алгоритм «плотной» упаковки, который пытается заполнить дыры в сетке раньше, если позже появятся более мелкие элементы.

Если этот параметр не указан, используется «разреженный» алгоритм, при котором алгоритм размещения перемещается только «вперед» в сетке при размещении элементов, и никогда не возвращается назад, чтобы заполнить пробелы.

person Michael Benjamin    schedule 28.07.2017