От автора: в любой CSS сетке у линий есть индексы, к которым можно обращаться для размещения элементов . Этим линиям можно назначить имена, что упростит работу и обслуживание сеточных макетов. Давайте поговорим об этом!
Grid грядет
Самый часто задаваемый вопрос в уроках по сеткам: «но когда я уже смогу воспользоваться ими?». Вопрос справедливый. Сетки грядут, и очень скоро.
«В марте 2017 года CSS Grid будут поддерживаться в Firefox и Chrome по умолчанию.» — Эрик Мейер
Если вы еще не успели познакомиться с этой технологией, самое время!
Номера строк в сетке
При создании сетки каждой линии задается свой индекс:
Обратите внимание: если макету не задано свойство direction: rtl;, номера будут начинаться из левого верхнего угла и будут спускаться в правый нижний.
На эти номера можно ссылаться для размещения элементов сетки:
|
1 2 3 4 |
.item { grid-column: 2; grid-row: 3; } |
В этом примере наш элемент .item будет располагаться на пересечении столбца 2 и строки 3:
Явные названия линий сетки
В сложных сетках очень трудно ссылаться на все по номерам. Именно поэтому модуль Grid позволяет задавать явные имена линий при объявлении колонок и строк в сетке.
Разберем пример, как те, которые уже были в нашей серии статей. Наша стандартная сетка 3х3:
|
1 2 3 4 5 6 |
.grid-1 { display: grid; grid-template-columns: 100px auto 100px; grid-template-rows: 60px 130px 50px; grid-gap: 20px; } |
Колонкам и строкам можно присвоить имена линий (имя может быть любым) при помощи квадратных скобок:
|
1 2 3 4 5 6 |
.grid-1 { display: grid; grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish]; grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end]; grid-gap: 20px; } |
Теперь элементы можно позиционировать с помощью имен, а не номеров:
|
1 2 3 4 |
.item { grid-column: centre-start; grid-row: header-start; } |
Несколько рекомендаций:
Имена можно подобрать под ваши описательные потребности, хорошо продумайте имена, чтобы запомнить области сетки.
Стандартные номера линий никуда не деваются, их все так же можно использовать.
Одной линии можно присвоить несколько имен, к примеру: [main-end footer-start row-5] и т.д.
Даже если вы задали имена линий, вы не обязаны их использовать. Делайте это просто «на всякий случай».
Неявные имена линий сетки
Когда мы сознательно что-то делаем, как именование линий в сетке, это называется явным действием. Когда же что-то подразумевается, но прямо не указано, это называется неявным действием. Мы разобрали явное именование линий сетки, но бывают обстоятельства, когда линиям задаются неявные имена. Из предыдущего урока можете вспомнить, что мы можем объявлять области сетки.
Мы можем объявить четыре области сетки:
|
1 2 3 4 5 6 7 |
grid-1 { /* ..другие стили */ grid-template-areas: "header header header" "main main sidebar" "footer footer footer"; } |
Эти стили дадут нам следующую картинку:
Если области сетки присвоить имя header, линиям, из которых состоит эта область, будут автоматически присвоены имена. У строчных линий будут имена header-start и header-end, а у вертикальных линий будут имена header-start и header-end. Это правило применяется и к остальным областям, линиям которых будут даны имена main-start, main-end, sidebar-start и т.д.
Обратите внимание: если развернуть мою мысль и задать явные имена линий в формате header-start и header-end, будет создана область сетки header.
Эти имена линий можно использовать, как и раньше, для позиционирования элементов. Эти имена существуют независимо от других заданных вами имен и стандартных номеров.
Подводим итог
Вот и весь совет! Не забывайте: возьмите в привычку задавать имена линий и областей для упрощенного управления и обслуживания.
Редакция: Ian Yates
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
