В стандарте CSS Grid Layout есть масса свойств и возможностей,с которыми бы хотелось разобраться, чтобы иметь возможность их применять на практике. Одной из таких возможностей является использование нумерованных и именованных линий сетки для распределения между ними grid-элементов.
Grid-lines (линии сетки) — это горизонтальные и вертикальные разделители grid-контейнера. Эти линии находятся по обе стороны от столбца или строки. Вы можете посмотреть на их расположение в инспекторе свойств браузера (F12, или Ctrl+Shift+I), если поставите флажок, который позволяет накладывать линии сетки и отображать номера и названия (имена) линий в браузере.
На скриншоте иже вы увидите, как это можно сделать в инструментах разработчика в браузерах Mozilla Firefox и Google Chrome последних версий.
По умолчанию вы увидите, что для любой линии задан числовой индекс (положительный или отрицательный), который может использовать дальше при назначении стилей. Нумерация начинается с единицы и идет слева направо по горизонтали и сверху вниз по вертикали. Однако справа налево также существует нумерация, но с отрицательными числовыми индексами. Аналогично этому снизу вверх мы также получаем отрицательные индексы.
Учтите, что в странах с правосторонней письменностью (на арабском языке, например), нумерация будет идти наоборот.
Кроме индексов, или числовых номеров линий сетки, мы можем задавать имена, которые потом будем использовать при размещении внутри сетки grid-элементов. С именованных линий мы с вами и начнем.
Практическое использование имен линий сетки для указания расположения элементов внутри нее
Мы будем делать маленькую фотогалерею, в которой при клике на блоке с элементами сетки будут появляться или исчезать фоновые изображения, которые мы будем загружать с ресурса unsplash.com. Вы можете попробовать сделать это на примере ниже при клике на любом элементе сетки (открыть в новой вкладке):
На примере мы видим всего 5 элементов сетки, причем расположены они не строго друг под другом стройными рядами в виде одинаковых ячеек, а как бы по кругу с квадратной ячейкой по центру.
Создание разметки. Основные CSS-свойства для grid-контейнера
Для начала нам нужно создать grid-контейнер и распланировать элементы сетки в нем. Поскольку изначально сетка очень похожа на таблицу и состоит из некоторого целого числа строк и столбцов, то для примера мы возьмем сетку размером 3х3.
Разметка сетки в HTML:
| 1 2 3 4 5 6 7 8 9 10 11 | <div class="grid"> <div class="grid-item1">Item 1</div> <div class="grid-item2">Item 2</div> <div class="grid-item3">Item 3</div> <div class="grid-item4">Item 4</div> <div class="grid-item5">Item 5</div> <div class="grid-item6">Item 6</div> <div class="grid-item7">Item 7</div> <div class="grid-item8">Item 8</div> <div class="grid-item9">Item 9</div> </div> |
Кстати, такую сетку очень легко сделать с помощью Emmet-аббревиатуры: .grid>.grid-item$*9>{Item $}
Для нее можно было бы написать такие правила:
| 1 2 3 4 5 6 7 8 9 10 11 12 | .grid { width: 900px; height: 900px; /* для столбцов*/ grid-template-columns: repeat( 3, 1fr); /* или */ grid-template-columns: 1fr 1fr 1fr; /* для строк*/ grid-template-rows: repeat( 3, 1fr); /* или */ grid-template-rows: 1fr 1fr 1fr; } |
Теперь добавим названия для линий сетки, указав их до размеров каждого из блоков в квадратных скобках:
| 1 2 3 4 5 6 | .grid { width: 900px; height: 900px; grid-template-columns: [start] 1fr [center-start] 1fr [center-end] 1fr [end]; grid-template-rows: [top] 1fr [center-top] 1fr [center-bottom] 1fr [bottom]; } |
Вот, что получится в плане разметки сетки с именами линий:
Перераспределение элементов по столбцам и строкам. Свойства grid-column-start, grid-column-end для столбцов и grid-row-start, grid-row-end для строк
Теперь нам нужно разместить элементы сетки, привязав начало и конец каждого grid-элемента к определенному названию линии. Для такой операции в модели CSS Grid существуют свойства grid-column-start, grid-column-end для столбцов и grid-row-start, grid-row-end для строк. В качестве значений в них мы можем указать либо номера, либо названия линий сетки.
Для того чтобы разместить первый элемент на 2 строки, начиная от линии с именем top и заканчивая линией с именем center-bottom.
| 1 2 3 4 5 6 | .grid-item1 { grid-column-start: start; grid-column-end: center-start; grid-row-start: top; grid-row-end: center-bottom; } |
После этого мы увидим, что первый элемент действительно занял 2 строки и остался в пределах одного столбца, но при этом он "выдавил" за пределы квадрата сетки 9-ый элемент. А это говорит о том, что, как и в таблицах при использовании атрибутов rowspan или colspan, нужно избавляться от лишних ячеек (теги td или th), так и в CSS Grid нужно убирать из разметки лишние элементы, если вы увеличиваете размер одного из них на несколько ячеек.
После всех наших манипуляций с изменением размещения grid-элементов мы оставим в разметке 5 из 9 элементов, т.к. 4 из них будут увеличены вдвое. Соответственно, 4 лишних элемента из начальной разметки должны исчезнуть.
Распределение элементов по именованным линиям
Следует еще отметить, что в том случае, когда grid-элемент занимает 1 ячейку (значение по умолчанию), тогда можно не указывать свойство grid-column-end. Кроме того, если элемент начинается с той линии, к которой он привязан в разметке по умолчанию, то и grid-column-start также указывать необязательно. А вот начало и конец тех линий, которые вы изменяете для этого элемента, указывать нужно обязательно. Поэтому css-стили для первого элемента нашей сетки изменятся таким образом:
| 1 2 3 4 | .grid-item1 { grid-row-start: top; grid-row-end: center-bottom; } |
Результирующие css-стили будут такими:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | body {margin: 20px;} .grid { width: 900px; height: 900px; grid-template-columns: [start] 1fr [center-start] 1fr [center-end] 1fr [end]; grid-template-rows: [top] 1fr [center-top] 1fr [center-bottom] 1fr [bottom]; border: 2px dotted #777; cursor: pointer; } [class*='item'] { text-align: center; font-weight: bold; box-shadow: inset 0 0 20px rgba(0,0,0,.4); background-repeat: no-repeat; background-position: center; background-size: cover; } .grid-item1 { grid-row-start: top; grid-row-end: center-bottom; } .grid-item2 { grid-column-start: center-start; grid-column-end: end; grid-row-end: center-top; } .grid-item3 { grid-column-start: center-start; grid-row-start: center-top; } .grid-item4 { grid-column-start: center-end; grid-row-start: center-top; grid-row-end: bottom; } .grid-item5 { grid-column-start: start; grid-column-end: center-end; grid-row-start: center-bottom; } |
В браузере Google Chrome вы можете посмотреть на названия линий сетки, если выберете эту опцию на вкладке Макет (Layout) в Инспекторе свойств (F12, или Ctrl + Shift + I) и установите флажок в блоке "Оверлеи сеток" для элемента с display: grid. Список таких элементов у вас будет отображен в этом блоке.
Медиа-запросы для планшетов и смартфонов
Еще один момент, связанный с нашей разметкой, заключается в том, чтобы сделать перестраивание сетки для экранов планшетов и смартфонов. Поэтому мы еще допишем медиа-запросы, которые сохранят пропорции нашей сетки на планшетах меньше ширины нашей сетки в 900px + отступы для body, и перестроят все блоки в одну колонку на смартфонах:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @media (max-width: 950px) { .grid { width: calc(100vw - 40px); height: calc(100vw - 40px); } } @media (max-width: 480px) { .grid { width: auto; height: auto; grid-template-columns: 1fr; grid-template-rows: repeat(5, 300px); } [class*='item'] { grid-column: auto; grid-row: auto; } } |
В коде для экранов, меньших 950px мы сохраняем пропорции сетки, определяя размеры по высоте такими же, как и по ширине: width: calc(100vw - 40px); height: calc(100vw - 40px);. Здесь 40px - это margin для body, который мы задавали в начале формирования всех css-свойств и который надо учесть при формировании конечной ширины.
Сама по себе сетка на планшетах сохраняет ту же структуру, что и на больших экранах. А вот для смартфонов мы отменяем все перераспределения grid-элементов по линиям сетки, используя значение auto (grid-column: auto; grid-row: auto;), а саму сетку делаем в одну колонку (grid-template-columns: 1fr) и 5 рядов по 300px высотой (grid-template-rows: repeat(5, 300px)).
Практическое использование нумерованных линий сетки
Мы начали рассматривать использование линий сеток для задания положения grid-элементов внутри них с именованных линий, но вы можете вполне использовать и номера, которые задаются для вcех линий сетки по умолчанию.
Считаются такие номера, или индексы, сверху вниз и слева направо в положительном направлении оси X, которая отвечает за размещение вдоль нее столбцов, или колонок сетки, и оси Y, вдоль которой располагаются строки или ряды сетки.
Отрицательные величины индексов считаются, соответственно, справа налево и снизу вверх.
В примере ниже мы будем использовать только положительные значения, чтобы не запутаться.
Используем ту же сетку, что и выше, но заменим свойства grid-template-columns и grid-template-rows на grid-template с 3-хкратным повторением сетки по вертикали и горизонтали:
| 1 2 3 4 5 | .grid { width: 900px; height: 900px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } |
Для первого grid-элемента зададим такие свойства:
| 1 2 3 4 | .grid-item1 { grid-row-start: 1; grid-row-end: 3; } |
Вместо свойств grid-row-start (grid-column-start) и grid-row-end (grid-column-end) можно использовать обобщенные их варианты в виде grid-row и grid-column:
| 1 2 3 4 | .grid-item4 { grid-row: 2/4; grid-column: 3; } |
При написании медиа-запросов для маленьких экранов нам не нужно уже задавать размещение элементов по столбцам и строкам, т.к. все элементы сетки выравниваются в одну колонку. Поэтому мы отменяем перераспределение блоков фотогалереи, задав значение initial для grid-column и grid-row, которое по факту сбрасывает все значения до значения по умолчанию в виде auto:
| 1 2 3 4 | [class*='item'] { grid-column: initial; grid-row: initial; } |
Все свойства вы найдете в примере ниже:
See the Pen Untitled by Elen (@ambassador) on CodePen.
Объединение столбцов и строк по линиям
При указании, какие строки и столбцы занимает grid-элемент, можно использовать ключевое слово span и цифру, указывающую, сколько строк или столбцов после указанной цифры/имени линии нужно объединить для данного элемента. Например:
| 1 2 3 | .grid-item1 { grid-row: 1/span 2; } |
Тут опять приходит в голову сравнение с атрибутами colspan и rowspan в таблицах и span для <col> или <colgroup>.
Использование свойства grid-auto-rows
В примере ниже вы найдете еще один вариант оформления столбцов и колонок, причем для формирования строк использовано свойство grid-auto-rows, которое позволяет указать высоту строк, без указания количества этих строк. То есть каждая новая строка будет иметь указанную высоту вне зависимости от того, сколько таких строк получится на основе разметки. Такие строки называются неявными, они формируются автоматически за счет того, сколько элементов появляется в разметке grid-контейнера (элемента, для которого задано свойство display: grid или inline-grid).
Еще в этом примере за счет изменения последовательности размещения grid-элементов последний из них в разметке на больших экранах будет находится в самом верху.
See the Pen grid-row & grid-column by Elen (@ambassador) on CodePen.
Практический пример фотогалереи с отрицательными индексами
Отличный пример фотогалереи для сайта, связанного с продажей или изготовлением кресел, можно найти у Dannie Vinther. Здесь для формирования колонок использованы css-переменные, а также свойства grid-row-start, grid-row-end, grid-row, grid-column, в том числе и с отрицательными индексами. Стоит разобраться в этом примере.
See the Pen Grid Chairs by Elen (@ambassador) on CodePen.
Надеюсь, все приведенные в этой статье примеры помогли вам разобраться с некоторыми особенностями CSS Grid Layout и убедили в необходимости использовать линии сетки и свойства grid-row-start, grid-row-end, grid-column-start, grid-column-end или их сокращенные аналогиgrid-row и grid-column.
