Сортировка и выравнивание элементов в Grid Layout

Сортировка и выравнивание элементов в Grid Layout

От автора: в этом уроке вы научитесь изменять порядок следования элементов с помощью модуля Grid Layout, после чего мы обсудим, как настроить выравнивание этих элементов в сетке. Мы уже изучили парочку важных тем по Grid. Начали мы с различных способов размещения элементов в Grid Layout, после чего познакомились с алгоритмом авторазмещения в сетке. Для правильной работы демо в этом уроке рекомендую использовать последнюю версию Firefox (52 на момент написания статьи) или Chrome (57 на момент написания статьи).

Принцип работы свойства order в Grid Layout

С помощью свойства order можно настроить порядок следования элементов в сетке. По умолчанию используется порядок, в котором элементы записаны в DOM. Например, если в исходном документе элемент А находится выше элемента В, то в сетке этот элемент будет стоять перед элементом В. В некоторых проектах может понадобиться возможность поменять исходных порядок.

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

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

Разберем пример. Наша разметка:

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div>

CSS код для размещения элементов сетки:

.c {
  grid-row-start: 1;
  grid-row-end: 2;
}

.e {
  grid-row-start: 1;
  grid-row-end: 3;
}

.b, .j {
  order: 2;
}

.a, .i {
  order: 3;
}

Сортировка и выравнивание элементов в Grid Layout

Если вспомнить этапы алгоритма авторазмещения, то элементы с явно прописанной позицией в ряду размещаются раньше элементов с незаданным положением. Поэтому элемент D с незаданным положением в строке и столбце, несмотря на то, что в исходном документе он идет перед Е, будет расположен после элемента Е (так как у него четко задана позиция строки: grid-row-start: 1 и grid-row-end: 3).

В элементах без четко заданной позиции в приоритете те, у которых значение order меньше. Поэтому элементы D, F, G и H расположены перед A и B. У элементов B и J одинаковое значение order, поэтому они размещаются согласно исходному порядку в документе. Обратите внимание, что элементы B и J находятся перед А и I, так как им присвоено меньшее значение order.

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

Логическая перестановка элементов в сетке с помощью свойства order вызовет несоответствия в стилях.

Выравнивание контента по оси строки в Grid Layout

Сортировка и выравнивание элементов в Grid Layout

С помощью свойств justify-self и justify-items можно контролировать выравнивание элементов сетки по оси строки. Свойство justify-self выравнивает контент одного элемента, а justify-items – всех элементов в сетке. Свойство justify-self принимает 4 возможных значения:

end выравнивает контент по правому краю сетки;

start выравнивает контент по левому краю сетки;

center выравнивает контент по центру сетки;

stretch заполняет всю ширину сетки.

По умолчанию justify-self принимает значение stretch. Свойство justify-items также выравнивает элементы по оси строки и принимает те же значения, что и justify-self. По умолчанию также задано stretch. Демонстрация работы justify-self:

Выравнивание контента по оси колонки в Grid Layout

Сортировка и выравнивание элементов в Grid Layout

Контент также можно выравнивать по оси колонки. С помощью align-self это можно делать для одного элемента сетки, с помощью align-items – для всех.

Как и предыдущие два свойства, align-self и align-items принимают 4 возможных значения: start, end, center и stretch.

Значения start и end выравнивают контент по верхней и нижней границе сетки соответственно. Значение center выравнивает контент по центру сетки, а justify заполняет всю высоту.

Большой пробел между первым и вторым рядом в демо ниже вызван тем, что элементы первого ряда выровнены по верхнему краю, а элементы второго ряда – по нижнему. Демонстрация align-self в действии.

Выравнивание всей сетки

Сортировка и выравнивание элементов в Grid Layout

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

Как и с предыдущими свойствами, по оси строки сетку можно выровнять с помощью justify-content, а по оси столбца с помощью align-content.

Оба свойства применяются к контейнеру сетки и помимо обычных значений start, end, center и stretch принимают space-around, space-between и space-evenly.

space-around делает равные отступы между треками сетки и половину отступа между внешними краями сетки и контейнером;

space-between делает равные отступы между треками сетки и убирает отступ между внешними краями сетки и контейнером;

space-evenly делает равные отступы между треками сетки, а также между внешними краями сетки и контейнером.

Оба свойства justify-content и align-content по умолчанию заданы в start. Элементы сетки в демо ниже выровнены с помощью следующего CSS кода:

.container {
  justify-content: space-around;
  align-content: space-evenly;
}

Такое выравнивание может вызвать нежелательные эффекты. Например, если элемент сетки занимает несколько рядов или колонок, то его ширина или высота могут увеличиться. Изменение высоты и ширины в таком случае зависит от количества разделителей, которые пересекает этот элемент в каждом направлении.

Заключение

В этом уроке мы полностью изучили основы сортировки и выравнивания элементов в Grid. Это повысит управляемость ваших сетчатых макетов.

Автор: Nitish Kumar

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree