CSS Grid туториал

Сетка – фундаментальный элемент дизайна любого веб-сайта, а CSS Grid – самый мощный и простой в использовании инструмент для ее создания.

Модуль CSS Grid получил поддержку множества современных браузеров (Safari, Chrome, Firefox) в этом году, так что всем фронтенд разработчикам так или иначе придется освоить эту технологию в брижайшем будущем.

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

Ваша первая сетка

Два главных ингридиента CSS Grid – это обертка (wrapper) и элементы, которые она содержит. Обертка – это и есть сетка, а элементы выполняют роль содержимого. Вот пример разметки wrapper’а с шестью элементами:

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Чтобы превратить наш div элемент в сетку нужно всего лишь отобразить его как grid.

Используем CSS свойство display: grid:

.wrapper {
    display: grid;
}

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

Колонки и ряды

Чтобы сделать сетку сеткой нам нужно определить колонки (columns) и ряды (rows). Давайте создадим три колонки и два ряда используя свойства grid-template-row и grid-template-column.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

Введя три значения для grid-template-columns, мы получаем сетку, состоящую из трех колонок. Аналогично для grid-template-rows: 2 значения и две строки.

Значение определяет насколько широкими мы хотим сделать наши колонки (100px) и какой высоты будут наши ряды (50px). Вот результат:

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

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

Теперь наша сетка выглядит так:

Расположение элементов

Теперь вам необходимо научиться располагать элементы внутри сетки. Здесь во всей красе предстает главная супер-сила CSS Grid – возможность легко и просто создавать разметку страниц.

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

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

Вот что получилось:

Обратите внимание, что мы видим сетку 3х2 вместо 3х3. Это потому, что в нашей сетке всего 6 элементов, и если мы добавим еще 3 элемента, то третий ряд также заполнится.

Чтобы позиционировать и изменять размеры наших элементов мы используем grid-column и grid-row свойства:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

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

Наверное, вас немного сбивает с толку, почему у нас 4 разделения на колонки, но самих колонок всего 3? Взгляните на эту картинку:

Когда item1 занял весь первый ряд, он вытеснил остальные элементы вниз.

А вот таким образом можно записать этот синтаксис в упрощенном виде:

.item1 {
    grid-column: 1 / 4;
}

Чтобы вы полностью поняли концепцию, давайте снова изменим элементы.

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

Вот как этот код отобразится на странице. Попробуйте осмыслить этот код, и понять, как он работает. Это не очень сложно.

Вот и все! Конечно же, в этом руководстве не рассмотрено еще огромное количество концептов CSS Grid, но мы вернемся к ним в следующих туториалах.

Перевод статьи Learn CSS Grid in 5 Minutes