TL;DR
Если вы знакомы с Flexbox, Grid должен показаться вам знакомым. Рэйчел Эндрю поддерживает отличный сайт, посвященный CSS Grid, который поможет вам начать работу. Grid теперь доступен в Google Chrome.
Flexbox?Сетка?
За последние несколько лет CSS Flexbox стал широко использоваться, и поддержка браузеров выглядит действительно хорошо (если только вы не один из тех бедолаг, которым приходится поддерживать IE9 и ниже). Flexbox упростил множество сложных задач по компоновке, таких как равноудаленное расстояние между элементами, компоновка сверху вниз или Святой Грааль волшебства CSS: вертикальное центрирование.
Но увы, экраны обычно имеют второе измерение, о котором нам нужно беспокоиться. Если не заботиться о размерах элементов самостоятельно, то, к сожалению, вы не сможете иметь и вертикальный, и горизонтальный ритм, используя только flexbox. Вот тут-то на помощь и приходит CSS Grid.
CSS Grid находится в разработке, за флагом в большинстве браузеров более 5 лет , и дополнительное время было потрачено на взаимодействие, чтобы избежать ошибочного запуска, как это было с Flexbox. Так что если вы используете Grid для реализации макета в Chrome, скорее всего, вы получите тот же результат в Firefox и Safari. На момент написания статьи реализация Grid в Edge от Microsoft устарела (такая же, какая уже присутствовала в IE11.), и обновление «находится на рассмотрении ».
Несмотря на сходство в концепции и синтаксисе, не стоит думать о Flexbox и Grid как о конкурирующих методах компоновки. Grid размещает в двух измерениях, тогда как Flexbox размещает в одном. При совместном использовании этих двух методов возникает синергия.
Определение сетки
Чтобы ознакомиться с отдельными свойствами Grid, я настоятельно рекомендую книгу Rachel Andrew's Grid By Example или CSS Tricks' Cheat Sheet . Если вы знакомы с Flexbox, многие свойства и их значение должны быть вам знакомы.
Давайте рассмотрим стандартную 12-колоночную сетку. Классическая 12-колоночная сетка популярна, поскольку число 12 делится на 2, 3, 4 и 6, и поэтому полезна для многих дизайнов. Давайте реализуем эту сетку:
Начнем с нашего кода разметки:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
В нашей таблице стилей мы начинаем с расширения нашего body так, чтобы оно охватывало всю область просмотра, и превращаем его в контейнер сетки :
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Теперь мы используем CSS Grid. Ура!
Следующий шаг — реализовать строки и столбцы нашей сетки. Мы могли бы реализовать все 12 столбцов в нашем макете, но поскольку мы не используем каждый столбец, это сделает наш CSS неоправданно запутанным. Для простоты мы реализуем макет следующим образом:
Заголовок и нижний колонтитул имеют переменную ширину, а содержимое — переменное в обоих измерениях. Навигация также будет переменной в обоих измерениях, но мы собираемся установить для нее минимальную ширину в 200 пикселей. (Зачем? Чтобы продемонстрировать возможности CSS Grid, конечно.)
В CSS Grid набор столбцов и строк называется track . Давайте начнем с определения нашего первого набора track, строк:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows принимает последовательность размеров, которые определяют отдельные строки. В этом случае мы задаем первой строке высоту 150 пикселей, а последней — 100 пикселей. Средняя строка установлена на auto , что означает, что она будет подстраиваться под необходимую высоту для размещения элементов сетки (дочерних элементов контейнера сетки ) в этой строке. Поскольку наше тело растянуто на всю область просмотра, дорожка, содержащая содержимое (желтая на рисунке выше), по крайней мере заполнит все доступное пространство, но будет увеличиваться (и заставит документ прокручиваться), если это необходимо.
Для столбцов мы хотим использовать более динамичный подход: мы хотим, чтобы и nav, и content увеличивались (и уменьшались), но мы хотим, чтобы nav никогда не уменьшался ниже 200px, а content был больше nav. В Flexbox мы бы использовали flex-grow и flex-shrink, но в Grid все немного по-другому:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Мы определяем 2 столбца. Первый столбец определяется с помощью функции minmax() , которая принимает 2 значения: минимальный и максимальный размер этой дорожки. (Это как min-width и max-width в одном.) Минимальная ширина, как мы уже обсуждали, составляет 200 пикселей. Максимальная ширина составляет 3fr . fr — это единица измерения сетки, которая позволяет распределять доступное пространство между элементами сетки. fr, вероятно, означает «fraction unit», но также может означать free unit soon . Наши значения здесь означают, что оба столбца будут увеличиваться, чтобы заполнить экран, но столбец содержимого всегда будет в 3 раза шире столбца навигации (при условии, что столбец навигации остается шире 200 пикселей).
Хотя размещение элементов сетки пока некорректно, размер строк и столбцов соответствует требованиям и обеспечивает то поведение, к которому мы стремились:
Размещение предметов
Одной из самых мощных функций Grid является возможность размещать элементы независимо от порядка DOM. (Хотя, поскольку программы чтения с экрана перемещаются по DOM, мы настоятельно рекомендуем, чтобы для обеспечения надлежащего доступа вы были внимательны к тому, как вы переупорядочиваете элементы.) Если ручное размещение не выполняется, элементы размещаются в Grid в порядке DOM, слева направо и сверху вниз. Каждый элемент занимает одну ячейку . Порядок заполнения сетки можно изменить с помощью grid-auto-flow .
Итак, как мы размещаем элементы? Вероятно, самый простой способ размещения элементов сетки — это определение того, какие столбцы и строки они покрывают. Grid предлагает два синтаксиса для этого: в первом синтаксисе вы определяете начальную и конечную точки. Во втором вы определяете начальную точку и диапазон:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Мы хотим, чтобы наш заголовок начинался в первом столбце и заканчивался перед третьим столбцом. Наше навигатор должно начинаться во второй строке и охватывать в общей сложности 2 строки.
Технически мы закончили реализацию нашего макета, но я хочу показать вам несколько удобных функций, которые Grid предоставляет для вас, чтобы сделать размещение проще. Первая функция заключается в том, что вы можете дать имена границам треков и использовать эти имена для размещения:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Приведенный выше код даст ту же компоновку, что и предыдущий код.
Еще более мощной является возможность присваивать имена целым областям в сетке:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas принимает строку имен, разделенных пробелами, что позволяет разработчику дать каждой ячейке имя. Если две соседние ячейки имеют одинаковое имя, они будут объединены в одну область. Таким образом, вы можете предоставить больше семантики коду макета и сделать медиа-запросы более интуитивными. Опять же, этот код сгенерирует тот же макет, что и раньше.
Есть еще?
Да, да, слишком много, чтобы охватить в одном сообщении блога. Рейчел Эндрю , которая также является GDE , является приглашенным экспертом в рабочей группе CSS и работала с ними с самого начала, чтобы убедиться, что Grid упрощает веб-дизайн. Она даже написала книгу об этом. Ее веб-сайт Grid By Example — ценный ресурс для знакомства с Grid. Многие считают Grid революционным шагом в веб-дизайне, и теперь он включен по умолчанию в Chrome, так что вы можете начать использовать его уже сегодня.