Совет: на всякий случай именуйте линии CSS Grid

Совет: на всякий случай именуйте линии CSS Grid

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

Grid грядет

Самый часто задаваемый вопрос в уроках по сеткам: «но когда я уже смогу воспользоваться ими?». Вопрос справедливый. Сетки грядут, и очень скоро.

«В марте 2017 года CSS Grid будут поддерживаться в Firefox и Chrome по умолчанию.» — Эрик Мейер

Если вы еще не успели познакомиться с этой технологией, самое время!

Номера строк в сетке

При создании сетки каждой линии задается свой индекс:


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Совет: на всякий случай именуйте линии CSS Grid

Обратите внимание: если макету не задано свойство direction: rtl;, номера будут начинаться из левого верхнего угла и будут спускаться в правый нижний.

На эти номера можно ссылаться для размещения элементов сетки:

.item {
  grid-column: 2;
  grid-row: 3;
}

В этом примере наш элемент .item будет располагаться на пересечении столбца 2 и строки 3:

Совет: на всякий случай именуйте линии CSS Grid

Явные названия линий сетки

В сложных сетках очень трудно ссылаться на все по номерам. Именно поэтому модуль Grid позволяет задавать явные имена линий при объявлении колонок и строк в сетке.

Разберем пример, как те, которые уже были в нашей серии статей. Наша стандартная сетка 3х3:

.grid-1 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 130px 50px;
  grid-gap: 20px;
}

Колонкам и строкам можно присвоить имена линий (имя может быть любым) при помощи квадратных скобок:

.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;
}

Теперь элементы можно позиционировать с помощью имен, а не номеров:

.item {
  grid-column: centre-start;
  grid-row: header-start;
}

Несколько рекомендаций:

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

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

Стандартные номера линий никуда не деваются, их все так же можно использовать.

Одной линии можно присвоить несколько имен, к примеру: [main-end footer-start row-5] и т.д.

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

Неявные имена линий сетки

Когда мы сознательно что-то делаем, как именование линий в сетке, это называется явным действием. Когда же что-то подразумевается, но прямо не указано, это называется неявным действием. Мы разобрали явное именование линий сетки, но бывают обстоятельства, когда линиям задаются неявные имена. Из предыдущего урока можете вспомнить, что мы можем объявлять области сетки.

Мы можем объявить четыре области сетки:

grid-1 {
 /* ..другие стили */
 
 grid-template-areas: "header header header"
 "main main sidebar"
 "footer footer footer";
}

Эти стили дадут нам следующую картинку:

Совет: на всякий случай именуйте линии CSS Grid

Если области сетки присвоить имя header, линиям, из которых состоит эта область, будут автоматически присвоены имена. У строчных линий будут имена header-start и header-end, а у вертикальных линий будут имена header-start и header-end. Это правило применяется и к остальным областям, линиям которых будут даны имена main-start, main-end, sidebar-start и т.д.

Обратите внимание: если развернуть мою мысль и задать явные имена линий в формате header-start и header-end, будет создана область сетки header.

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

Подводим итог

Вот и весь совет! Не забывайте: возьмите в привычку задавать имена линий и областей для упрощенного управления и обслуживания.

Редакция: Ian Yates

Источник: https://webdesign.tutsplus.com/

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

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

Комментарии 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