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

Введение

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

Свойство Grid-template-areas

Один из способов переупорядочения столбцов сетки — через свойство Grid-template-areas. Это позволяет вам определять определенные области в сетке и назначать столбцы для этих областей. Например:

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

Это переместит элемент col3 в начало строки, а затем элемент col1.

Размещение на основе строк

Вы также можете использовать размещение на основе строк для управления порядком столбцов. Это предполагает размещение элементов сетки один за другим вдоль линий сетки, при этом свойства «grid-column-start» и «grid-column-end» определяют начальное и конечное местоположения.

Например, чтобы позиционировать Элемент col3 после элемента col1:

.col3 {
  grid-column-start: 2;
}

Свойство Order

Свойство order устанавливает порядок элементов сетки внутри дорожки. Значения ниже 0 помещают элемент перед началом дорожки, а значения больше 0 — после конца дорожки.

Чтобы переместить элемент col3 в первую позицию:

.col3 {
  order: -1;
}

Функция плотности

Функция плотности свойства Grid-auto-flow также может использоваться для изменения порядка столбцов сетки. Он выравнивает элементы в доступном пространстве, начиная с начала контейнера сетки, пропуская пустые ячейки сетки.

Чтобы переместить элемент col3 в начало второй строки:

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

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