От автора: в этом уроке вы научитесь изменять порядок следования элементов с помощью модуля Grid Layout, после чего мы обсудим, как настроить выравнивание этих элементов в сетке. Мы уже изучили парочку важных тем по Grid. Начали мы с различных способов размещения элементов в Grid Layout, после чего познакомились с алгоритмом авторазмещения в сетке. Для правильной работы демо в этом уроке рекомендую использовать последнюю версию Firefox (52 на момент написания статьи) или Chrome (57 на момент написания статьи).
Принцип работы свойства order в Grid Layout
С помощью свойства order можно настроить порядок следования элементов в сетке. По умолчанию используется порядок, в котором элементы записаны в DOM. Например, если в исходном документе элемент А находится выше элемента В, то в сетке этот элемент будет стоять перед элементом В. В некоторых проектах может понадобиться возможность поменять исходных порядок.
Свойство order особенно удобно использовать, когда элементов много, или когда они добавляются динамически. Если в таких случаях требуется, чтобы элемент добавлялся всегда в конец сетки, свойство order с легкостью обеспечит вам это.
Первыми в сетке отображаются элементы с наименьшим значением order, после которых идут элементы с большим значением. Если значения совпадают, сортировка будет выполнена с учетом исходного порядка в документе.
Разберем пример. Наша разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 код для размещения элементов сетки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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; } |
Если вспомнить этапы алгоритма авторазмещения, то элементы с явно прописанной позицией в ряду размещаются раньше элементов с незаданным положением. Поэтому элемент 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
С помощью свойств 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
Контент также можно выравнивать по оси колонки. С помощью align-self это можно делать для одного элемента сетки, с помощью align-items – для всех.
Как и предыдущие два свойства, align-self и align-items принимают 4 возможных значения: start, end, center и stretch.
Значения start и end выравнивают контент по верхней и нижней границе сетки соответственно. Значение center выравнивает контент по центру сетки, а justify заполняет всю высоту.
Большой пробел между первым и вторым рядом в демо ниже вызван тем, что элементы первого ряда выровнены по верхнему краю, а элементы второго ряда – по нижнему. Демонстрация align-self в действии.
Выравнивание всей сетки
Иногда внешние грани сетки могут не совпадать с внешними краями контейнера. Такое может происходить, когда строки или колонки имеют фиксированный размер. В таких случаях может потребоваться выравнивание сетки в определенном направлении.
Как и с предыдущими свойствами, по оси строки сетку можно выровнять с помощью 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 кода:
|
1 2 3 4 |
.container { justify-content: space-around; align-content: space-evenly; } |
Такое выравнивание может вызвать нежелательные эффекты. Например, если элемент сетки занимает несколько рядов или колонок, то его ширина или высота могут увеличиться. Изменение высоты и ширины в таком случае зависит от количества разделителей, которые пересекает этот элемент в каждом направлении.
Заключение
В этом уроке мы полностью изучили основы сортировки и выравнивания элементов в Grid. Это повысит управляемость ваших сетчатых макетов.
Автор: Nitish Kumar
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
