Если вы создаете сайт, значительная часть вашего времени будет уходить на размещение отдельных элементов. Макет должен выглядеть интересно и в то же время быть понятным благодаря интуитивному и четко организованному представлению. Каскадные таблицы стилей (CSS) являются инструментом для создания привлекательного дизайна веб-сайтов. В то время как человек элементарно размечает свой контент с помощью HTML, веб-дизайнеры обычно используют CSS для создания сложных макетов. Веб-технологии постоянно совершенствуются. С появлением CSS3 новые технологии развились до такой степени, что язык разметки можно использовать и для мобильного интернета и отзывчивого дизайна.
Для чего используется CSS Grid Layout?
Мобильный Интернет представляет собой серьезную проблему для веб-дизайнеров. Это связано с тем, что они не могут знать формат отображения сайта из-за разнообразия мобильных устройств с разным дизайном. По этой причине важно, чтобы отдельные объекты (текстовые поля, графика, интерактивные элементы) были распределены независимо и четко — и действительно с учетом особых пространственных условий, задаваемых дисплеем.
В прошлом дизайнерам приходилось довольствоваться так называемыми плавающими элементами. Однако работа по этой технологии была сложна и сопряжена с ошибками. Теперь существует два равноценных метода создания динамического макета: В дополнение к CSS Grid вы также можете, например, использовать Flexbox для реализации продуманного дизайна. Однако обе технологии отличаются друг от друга в некоторых аспектах.
Flexbox является одномерным. Элементы, в принципе, перемещаются только вдоль оси. CSS Grid Layout предоставляет веб-дизайнеру два измерения для размещения объектов. Вместо одной оси в CSS Grid можно использовать сетку, состоящую из строк и столбцов.
CSS Grid: Учебник с примерами
У тех, кто уже имеет опыт работы с CSS, не возникнет проблем с Grid. В следующем руководстве мы опишем самые важные функции для начала работы.
Учебник работает с одним файлом. Код CSS записывается непосредственно в шапке HTML-файла. Однако можно также создать отдельную таблицу стилей и отображать ее только в HTML-файле.
Создание контейнеров и элементов
CSS Grid знаком с двумя различными единицами: контейнерами и элементами. Контейнер — это верхний уровень, где определяются свойства, которые затем передаются всем элементам. Таким образом, элемент находится (если рассматривать его иерархически) внутри контейнера. Однако для компоновки сетки все равно нужен HTML. В разделе HTML исходного текста создаются отдельные объекты (например, текст, графика), которые затем захватываются в CSS Grid и приводятся в правильное положение.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
</div>
</body>
</html>В результате мы создали шесть элементов, каждый из которых определен как «элемент сетки», и все они упакованы в «контейнер сетки». Чтобы CSS был активен с самого начала, необходимо запустить функцию «display:-grid» в контейнере. Пока что код создал только шесть чисел, которые появляются друг среди друга. Однако после создания этих элементов их можно относительно свободно перемещать по экрану.
Сетка, столбцы и строки
В CSS Grid вы будете работать со строками и столбцами и таким образом создавать сетку. Внутри сетки можно расположить отдельные объекты. Эта сетка может или должна быть свободно выбираемой. Пользователь определяет границы строк и столбцов. Для этого в контейнер добавляются две команды.
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
}С помощью обеих этих команд мы открыли сетку 2×3. Как видите, размер каждой строки и столбца можно настроить индивидуально. Характеристики просто вводятся последовательно (разделяются пробелом). Помимо точной спецификации в пикселях, можно также использовать процентную долю или другие типы размеров, привычные для CSS. С помощью спецификаций «max-content» и «min-content» вы также можете создать сетку относительно содержимого.
Вы также можете создать зазор с помощью команды «grid-gap».
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-gap: 5px;
}В результате ячейки будут отделены друг от друга равным расстоянием. Тот, кто не хочет иметь стандартное расстояние между ячейками, может также настроить промежутки, введя «grid-column-gap» и «grid-row-gap».
Дробь — это уникальная функция. Как и в случае с процентными характеристиками, с помощью этой единицы измерения можно разделить экран на отдельные части. Допустим, мы хотим разделить область на семь горизонтальных единиц. При этом отдельный столбец должен быть в два раза больше остальных. Это можно реализовать с помощью следующего кода:
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
grid-gap: 5px;
}
Преимущество работы с относительными размерами вместо статических характеристик заключается в следующем: Сетка может быть автоматически адаптирована к размеру экрана. Даже если отдельные колонки должны быть меньше, вторая колонка всегда остается (в нашем примере) в два раза больше остальных. Если вы хотите навсегда установить размер строки, то есть не подстраивать ее под экран, просто задайте этой строке статическое значение.
Размещение элементов
После определения сетки можно размещать различные объекты. Для этого необходимо создать элементы и указать начальное и конечное значения. Однако не обязательно, чтобы каждый элемент занимал только одну ячейку в сетке.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
}
.grid-item1 {
background: blue;
text-align: center;
border: black 5px solid;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
.grid-item2 {
background: grey;
text-align: center;
border: black 5px solid;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item2">3</div>
<div class="grid-item2">4</div>
<div class="grid-item2">5</div>
<div class="grid-item2">6</div>
</div>
</body>
</html>
Сейчас мы ввели два типа элементов. В то время как последние шесть элементов автоматически занимают только одну ячейку, первый объект растягивается на четыре столбца и две строки. (Для большей наглядности наши примеры также содержат еще один визуальный макет. Однако вы не сможете определить цвет, рамки и центрирование текста только с помощью CSS Grid).
Значения для начала и конца объектов лишь косвенно относятся к строкам и столбцам. На самом деле, вы ссылаетесь на соответствующие линии сетки. В примере четвертый столбец заканчивается пятой линией. Однако у вас есть разные варианты указания промежутка.
- Нумерация: Перечисление строк слева направо и сверху вниз.
- Имена: В рамках «grid-template-rows» и «grid-template-columns» можно присвоить строкам имена (в квадратных скобках) и затем ссылаться на эти обозначения.
- Промежутки: С помощью параметра «промежуток» можно указать, сколько ячеек должен занимать объект в соответствующем направлении.
Вместо того чтобы определять начальную и конечную точки соответственно в отдельной команде, веб-дизайнеры могут объединить их в одной команде. Следующий код приводит к тому же результату, что и предыдущий пример.
<style>
.grid-container {
display: grid;
grid-template-rows: 100px [Line1] 100px [Line2] 100px [Line3] 100px [Line4];
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
}
.grid-item1 {
background: blue;
text-align: center;
border: black 5px solid;
grid-column: 1 / span 4;
grid-row: 1 / Line2;
}
.grid-item2 {
background: grey;
text-align: center;
border: black 5px solid;
}
</style>Распределение областей
В CSS Grid можно объединять ячейки в области и присваивать им имена. Это несколько упрощает распределение отдельных элементов внутри сетки. Настройку для этого можно выполнить в контейнере. Для этого используйте команду «grid-template-areas», а затем построчно пропишите в ячейках желаемые названия областей. Если вы не хотите присваивать ячейке имя и тем самым надолго оставлять ее пустой, просто вставьте здесь точку. Каждая строка заключена в кавычки.
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 5px;
grid-template-areas:
"area1 area1 area1 area1 area1"
"area2 area2 . area3 area3"
"area2 area2 area4 area4 area4";
}В этом примере CSS Grid мы определили четыре различные области. Одна ячейка осталась открытой. Если вы теперь определите элементы, вам не нужно указывать значение от до. Достаточно сослаться на соответствующую область.
.grid-item1 {
background: blue;
text-align: center;
border: black 5px solid;
grid-area: area1;
}
.grid-item2 {
background: red;
text-align: center;
border: black 5px solid;
grid-area: area2;
}
.grid-item3 {
background: green;
text-align: center;
border: black 5px solid;
grid-area: area3;
}
.grid-item4 {
background: yellow;
text-align: center;
border: black 5px solid;
grid-area: area4;
}
Настройка выравнивания
Как выравниваются отдельные элементы в CSS Grid? Стандартом является то, что отдельные элементы разворачиваются таким образом, чтобы они точно помещались внутри сетки. Поэтому размер элемента не играет роли и поэтому не был указан в примерах, которые мы использовали до этого момента. Вместо этого мы указали, по каким ячейкам будет распределен объект. Однако вы можете назначить элементу фиксированный размер и все равно захотите интегрировать его в сетку.
У веб-дизайнеров есть возможность либо задать выравнивание всех элементов глобально с помощью контейнера, либо задать выбранным объектам определенное выравнивание. Для глобального варианта дизайнеры используют «justify-items» и «align-items». Первый настраивает горизонтальное выравнивание, второй — вертикальное. Если нужно выровнять отдельный элемент, можно воспользоваться командами «justify-self» и «align-self». Однако все команды содержат одинаковые опции.
- растянуть: Размер объекта подгоняется под размер выделенных ячеек.
- начать: Объект выравнивается слева или сверху.
- конец: Объект выравнивается вправо или вниз.
- center: Объект выравнивается по центру.
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
justify-items: center;
align-items: center;
}
.grid-item1 {
background: grey;
text-align: center;
border: black 5px solid;
width: 50px;
height: 50px;
}
.grid-item2 {
background: blue;
text-align: center;
border: black 5px solid;
width: 50px;
height: 50px;
justify-self: start;
align-self: start;
}
Дизайнеры также могут сокращать команды, используя «place-items» или «place-self». Оба типа информации (вертикальная и горизонтальная) могут быть размещены только в одной ячейке: place-items: <align-items> / justify-items>.
place-items: center / end;Также можно выравнивать объекты в сетке, хотя можно и перемещать всю сетку внутри контейнера. Если вы склонны работать со статическими указателями размеров для CSS Grid, то иногда размер сетки не совпадает с размером контейнера. В этом случае вы можете выровнять сетку внутри контейнера — и, таким образом, внутри дисплея — с помощью «justify-content» и «align-content». Существуют различные варианты выравнивания:
- начало: выравнивание слева или сверху
- конец: выравнивание вправо или вниз
- по центру: выравнивание по центру
- растянуть: растянутая сетка
- space-around: равномерное распределение пространства вокруг ячеек
- space-between: равномерное распределение пространства между ячейками
- space-evenly: равномерное распределение пространства вокруг ячеек с учетом полей
.grid-container {
display: grid;
width: 800px;
height: 800px;
background: yellow;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
justify-content: space-evenly;
align-content: center;
}
Для этого случая существует сокращенная версия: place-content: <align-content> / <justify-content>.
place-content: center / space-evenly;Автоматическая подгонка для отзывчивых дизайнов
Важнейшим преимуществом CSS Grid является гибкость сетки. Вы можете настроить CSS Grid таким образом, чтобы она автоматически подстраивалась. Это улучшает отображение на различных устройствах: автоматизация также помогает упростить работу с CSS.
Одна из полезных функций называется «повторить()». Вместо того чтобы определять каждую строку или столбец отдельно, вы можете задать размер и определить, как часто эта формула будет повторяться. Это еще проще сделать в сочетании с опциями «auto-fill» и «auto-fit». При этом вы позволяете CSS Grid позаботиться о создании строк и столбцов. При первом варианте CSS Grid вставляет как можно больше ячеек, не раздвигая границы контейнера. Однако это может привести к тому, что пространство останется неиспользованным. Опция «auto-fit», напротив, регулирует размер отдельных ячеек таким образом, что пространство используется до границы.
.grid-container {
display: grid;
width: 800px;
height: 800px;
grid-template-rows: repeat(auto-fit, 100px);
grid-template-columns: repeat(auto-fit, 100px);
grid-gap: 5px;
}Также очень полезны функции «grid-auto-columns» и «grid-auto-rows». Обе эти команды дают больше свободы при создании элементов. Если бы сетка имела размер, например, 4 x 4 ячейки, а элемент начинался бы только с пятого столбца, это привело бы к проблемам. Благодаря автоматическому созданию достаточного количества строк и столбцов можно предотвратить такие проблемы.
.grid-container {
display: grid;
grid-auto-rows: 100px;
grid-auto-columns: 100px;
grid-gap: 5px;
}Даже если размер сетки и объектов должен подстраиваться под дисплей, веб-дизайнеры любят вводить минимальные и максимальные значения. С помощью команды «minmax()» вы можете быть уверены, что элемент не будет слишком маленьким или слишком большим. Для этого можно сначала ввести в скобках наименьшее значение, а затем наибольшее.
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-auto-columns: minmax(50px, 150px);
grid-gap: 5px;
}Если теперь вы объедините несколько функций, которые мы представили, вы сможете легко создать отзывчивый дизайн.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
justify-items: center;
align-items: center;
}
.grid-item1 {
background: grey;
text-align: center;
border: black 5px solid;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item1">2</div>
<div class="grid-item1">3</div>
<div class="grid-item1">4</div>
<div class="grid-item1">5</div>
<div class="grid-item1">6</div>
<div class="grid-item1">7</div>
<div class="grid-item1">8</div>
<div class="grid-item1">9</div>
<div class="grid-item1">10</div>
</div>
</body>
</html>
CSS Grid дает веб-дизайнерам возможность создавать привлекательные макеты без особых усилий. Благодаря сетке у вас всегда есть контроль над размещением объектов — даже если это отзывчивый дизайн.