CSS Grid Layout: Быстрый старт...

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

Ваш браузер

CSS Grid Layout (известный своим друзьям как «Grid») находится в стадии разработки и пока что поддержка браузеров для него довольно слабая. Чтобы начать использовать это сейчас, вам либо нужно будет использовать IE11 (хотя он использует более старую версию спецификации), Microsoft Edge, Chrome Canary или Firefox Nightly.

Пожалуй, проще всего включить функции Экспериментальной веб-платформы в Chrome: chrome://flags/#enable-experimental-web-platformfeatures.

Настройка сетки

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

Терминология

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

На изображении ниже вы увидите демонстрационную сетку, показывающую:

1. линии сетки
2. столбцы
3. строки
4. ячейки

Для графического макета, это может показаться более знакомо, если мы используем одну и ту же сетку, но сужаем несколько дорожек, чтобы создать отстыпы между областями содержимого.

1. отступы

Нам нужно прояснить один последний термин, прежде чем двигаться дальше:

1. область сетки

Область сетки — это любая часть нашей сетки, огороженная четырьмя линиями сетки; может содержать любое количество ячеек сетки.

Пора строить эту сетку в браузере! Начнем с разметки.

Разметка сетки

Чтобы воссоздать сетку выше, нам нужен элемент контейнера; все, как ты любишь:

<section class="grid-1"></section>

В нем мы собираемся разместить девять дочерних элементов.

<section class="grid-1">  <div class="item-1">1</div>  <div class="item-2">2</div>  <div class="item-3">3</div>  <div class="item-4">4</div>  <div class="item-5">5</div>  <div class="item-6">6</div>  <div class="item-7">7</div>  <div class="item-8">8</div>  <div class="item-9">9</div></section>

Создайте форк этого начального pen’а, если хотите продолжать вместе. Я добавил несколько базовых стилей, чтобы визуально отличать каждый элемент сетки.

Правила сетки

Во-первых, мы должны объявить, что наш элемент контейнера является сеткой, используя новое значение свойства display:

.grid-1 {  display: grid;}

Правильно, это было легко. Затем мы должны задать нашу сетку, указав, сколько дорожек сетки она будет иметь, как по горизонтали, так и по вертикали. Мы делаем это с помощью свойств grid-template-columns и grid-template-rows:

.grid-1 {  display: grid;  grid-template-columns: 150px 20px 150px 20px 150px;  grid-template-rows: auto 20px auto 20px auto;}

Вы увидите пять значений для каждого. Значения для столбцов grid-template-columns указывают, что «первый столбец должен быть 150px в ширину, второй 20px в ширину, третий в 150px» и т.д. для пяти столбцов, более или менее соответствующих нашему изображению финского флага. Пять значений для grid-template-rows содержат нечто подобное. Каждый из них будет auto по умолчанию, принимая высоту от содержимого, но мы хотим быть более точными с нашими отступами, давая им высоту 20px, поэтому нам нужно перечислить все пять рядов.

Каждому из наших элементов автоматически присвоена область сетки в хронологическом порядке. Не плохо, но что случилось с пунктами 2, 4 и 7? Они попали в вертикальные отступы, потому что наши отступы — вполне законные дорожки сетки и, если мы не будем более конкретными, именно эти их расположения в сетке будет принадлежать этим пунктам. Пришло время добавить некоторые правила для наших элементов.

Правила элементов

Синтаксис, доступный нам в данный момент, может быть довольно сложным, но мы сделаем всё как можно проще, используя то, что на самом деле является сокращенным свойством. Мы начнем с нашего первого пункта, указав, что мы хотим, чтобы он начинался с grid-column 1 и grid-row 1:

.item-1 {  grid-column: 1;  grid-row: 1;}

Наш элемент автоматически заполнит минимальное свободное пространство между линиями сетки. Наш второй пункт немного менее очевиден. Мы также хотим, чтобы он начинался с grid-row 1, но мы хотим, чтобы он пропустил grid-column 2 и вместо этого начал в grid-column 3. Столбец 2 останется пустым, чтобы сформировать наш отступ.

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

Продолжаем в том же духе, перескакивая через наши отступы столбцов и рядов, заканчивая, наконец, нашим девятым пунктом:

.item-9 {  grid-column: 5;  grid-row: 5;}

Вывод

Вот и все, вы работаете с сеткой! Напомним четыре основных этапа:

1. Создать элемент контейнера и задать ему display: grid;.
2. Используйте этот же контейнер для определения дорожек сетки с помощью свойств grid-template-columns и grid-template-rows.
3. Поместите дочерние элементы в контейнер.
4. Укажите, где каждый дочерний элемент находится в сетке, указав его grid-column и grid-row.

В следующей части этой серии мы глубже разберем синтаксис сетки, улучший способ определения наших отступов, изучим гибкие макеты, единицу fr, функцию repeat() и продолжим работу с нашей простой сеткой. Увидимся там!

Полезные ресурсы по Grid

• @rachelandrew следуйте Рэйчел Эндрю и вы не прогадаете.