Что вы узнаете:

  1. Как построить CSS-сетку, поддерживаемую браузерами.
  2. Как подключить Grid Layout.
  3. Разберетесь в основах строк и столбцов сетки.
  4. Познакомитесь с новой дробной единицей (fr).
  5. Поработаете со вложенными сетками.

ДА! Пора начинать!

Если вы, вдруг, не знаете, что такое CSS Grid, то, в двух словах, это относительно новый стандарт для создания сеток в CSS.

Шаг 1. Построить CSS-сетку, поддерживаемую браузерами

На момент написания этой статьи (9.04.2017) поддержку браузерами CSS Grid нельзя назвать впечатляющей. Тем не менее, это не повод, не пытаться разобраться с ней уже сейчас.

Поддержка технологии браузерами

Действие: Обновите ваш Chrome, Firefox, Safari или Opera браузер, или просто скачайте последний Firefox или Chrome.

Шаг 2. Изучить основы Grid Layout

Как и во всем в этой жизни, знание основ поможет вам избежать большого количества головной боли.
Действие: Чтение и написание кода
Взгляните на этот код:

Простой макет страницы. Ничего сложного. Пока что.
Для наглядности (и просто потому что никто не любит уродливые примеры) добавьте элементу body немного цвета:

Вот наш результат:

Не думаю, что вы нашли эту статью с целью научиться делать большие зеленые экраны, так что продолжим.

Добавим немного контента в aside и main.

Main имеет несколько больше текста, чем aside.
Добавим стилей

Вот, что мы получим:

Все как мы и ожидали увидеть

Первое, что нужно знать: Подключение Grid Layout

Как и Флексбокс, Grid Layout начинается с установки grid-container. Забудьте про сложные профессиональные термины, все делается легче легкого

Элемент body стал родительским контейнером для aside и для main


Вид body вообще никак не изменился

Второе, что нужно знать: строки и столбцы сетки

В самом простом случае сетка включает в себя столбцы и строки. Чтобы получить какую-то практическую выгоду от использования Grid layout вы должны определить как строки и столбцы будут располагаться.
Давайте сделаем так, чтобы aside и main шли бок о бок, в две колонки

Простая сетка в два столбца

grid-template-columns – это свойство сетки. Я не жду, что вы сразу поймете, что это такое.
grid-template-columns определяет, как будут располагаться столбцы сетки, какой ширины или насколько пропорциональны они должны быть. В этом примере первая колонка будет шириной 20%, а вторая – 80%.
Для удобочитаемости добавим немного пространства между колонками

Очень просто – и никаких margin

grid-column-gap – еще одно новое свойство, с которым вы, возможно, раньше не сталкивались. Оно определяет расстояние между столбцами.
Если вы были внимательны, то заметили что-то странное. Aside имеет ширину 20%, main – 80%. В сумме это дает 100%. grid-column-gap добавляет еще 15px – лишних 15px. Новая ширина сетки теперь превышает 100% (20% + 80% + 15px). Из-за этого один из блоков куда-то сдвинулся и появился горизонтальный скролл, чтобы увидеть эти дополнительные 15px контента.
Это стоит исправить.

Третье, что нужно знать: Дробные единицы

Дробные единицы fr новые для CSS. В отличие от других единиц измерений CSS, они играют важную роль в построении сеток.
Проблема, которую мы упомянули выше, легко решается при помощи дробных единиц

Вместо того, чтобы использовать значения 20% и 80%, я использовал 1fr и 4fr соответственно.
Итак, что теперь у нас происходит?
grid-column-gap все еще занимает ширину в 15px. Оставшееся свободное пространство внутри контейнера разделяется в пропорциях 1:4, благодаря дробным единицам (fr).

Ничего страшного, если вы немного запутались. Глубоко вдохните, перечитайте этот раздел еще раз и вы лучше поймете, как это работает.

Четвертое, что нужно знать: Вложенные сетки

Сетки, кстати, могут быть вложенными.
Удалите из main весь контент и заполните его пустыми параграфами

А теперь сделайте main грид-контейнером

Довольно легко.
Распределите место для строк и столбцов. Как насчет двух колонок?

Код выше создал две колонки одинаковой ширины и задал между ними расстояние в 20px

Вложенные сетки

Кстати, у aside и main еще установлены padding-и в 10px.
Еще вы можете задавать размеры строк

Первая строка 100px и вторая 150px

Надеюсь, для первого раза это было не чересчур. Зато теперь вы знаете основы!

 

Оригинал статьи

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Рубрики: CSSHTML

1 комментарий

Петрович · 07.11.2019 в 16:03

В приведенном в статье коде не хватает:
main p {
/* зададим фон вложенной сетке: */
background-color: rgba(26, 188, 156, 1);
}
Только так будет работать правильно, как на картинках

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

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

Похожие записи

CSS

Подсказки о доступности подсказок

Возможно, совсем недавно вы читали статью Адриана Розелли “Отскребая соженный тост” или “Обсуждение подсказок” Криса Койлера. Или, возможно, изучали гит-репозитории “Стандартного UI-элемента – тост” и ветку его обсуждения в WICG. В конце концов, вы можете Подробнее…

CSS

Плейсхолдеры в полях делают больно

Статья достаточно старая (2014 год), но разработчики форм косячат снова и снова. В общем, не баян, а классика Если коротко: плейсхолдеры вместо ярлыков увеличивают количество ошибок и нагружают память пользователей. А еще, мешают людям с Подробнее…

CSS

Блок со скошенными углами на CSS

Несколько дней назад мы опубликовали скошенный hero-компонент, модификатор простого блока. Его можно использовать для дизайна, основанного исключительно на прямоугольных сечениях. Летс ду ит! Есть видеоурок, где объясняются различные способы реализации скосов у блока (а тут Подробнее…

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: