Полный самоучитель по CSS Grid со шпаргалкой

Объяснили, как работают все свойства CSS Grid, и дали шпаргалку, которая охватывает все, что можно сделать с помощью Grid.

Рафаил Агазода

Сегодня мы изучим свойства CSS Grid, чтобы вы могли создавать адаптивные сайты. Мы объясним, как работает каждое из свойств Grid и дадим шпаргалку, которая охватывает все, что можно сделать с помощью Grid.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое CSS Grid

Grid – это схема или сетка для создания веб-сайтов.

Модель Grid позволяет компоновать содержимое вашего сайта. Кроме того, она помогает создавать структуры для адаптивных веб-сайтов. Ваш сайт будет хорошо выглядеть на ПК, на смартфоне и планшете.

Вот демо, сделанное на Grid в качестве основного чертежа.

Вид на ПК:

Мобильный вид:

Архитектура CSS Grid

Как работает архитектура Grid? Элементы Grid распределяются вдоль осей X и Y. Используя свойства Grid, вы можете создать макет сайта и управлять контентом на странице.

При этом в Grid вы можете объединять несколько строк и столбцов, как в программе Excel, что дает вам больше гибкости и возможностей, чем Flexbox.

Кстати, вот шпаргалка, которую я сделал для Flexbox, если вы хотите узнать об этом больше.

Вот шпаргалка, которая содержит все свойства Grid. Свойства сетки делятся на:

Родительские свойства.
Дочерние свойства.

Примечание: Красным цветом выделены сокращенные свойства.

К концу этого урока у вас будет четкое понимание того, как всё это использовать.

Как настроить проект

Для этого проекта вам нужно знать немного HTML и CSS и как работать с VS-кодом. Сделайте следующее:

Создайте папку с именем “Project-1” и откройте VS Code.
Создайте файлы index.html и style.css.
Установите Live Server и запустите его.

Или вы можете просто открыть Codepen и начать кодить.

HTML

Создайте три блока внутри тега body.

			<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
</div>

CSS

Очистите стили браузера по умолчанию.

			*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Внутри селектора body выполните следующее:

			body {
  font-family: sans-serif;
  font-size: 40px;
  width: 100%;
  min-height: 100vh;
}

Теперь давайте зададим стили всем нашим блокам:

			[class^="box-"] {
  background-color: skyblue;

/* To place the letter at the center */
  display: grid;
  place-items: center;
}

Примечание: мы подробно обсудим эти свойства сетки позже.

Теперь добавьте промежутки между блоками.

			.container {
  display: grid;
  gap: 20px;
}

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

Для родительского свойства Grid мы будем кодить внутри класса .container.

Для дочернего свойства Grid мы будем кодить в классах .box-*.

Родительские свойства CSS Grid

Изучим родительские свойства CSS Grid.

Свойство grid-template-columns

Это свойство используется для определения количества и ширины колонок сетки.

Вы можете задать ширину каждой колонки по отдельности или установить единую ширину для всех колонок с помощью функции repeat().

Напишите это в CSS:

			.container {
  display: grid;
  gap: 20px;

/*  Change the values     ???? to experiment */
  grid-template-columns: 200px auto 100px;
}

Значения пикселей будут точным измерением. Ключевое слово "auto" будет охватывать все доступное пространство.

Если в качестве единицы измерения использовать fr (это — дробная единица), все поля будут одинакового размера.

Свойство grid-template-rows

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

Вы можете задать высоту каждой строки или установить единую высоту для всех строк с помощью функции repeat().

Напишите следующий код CSS:

			.container {
  display: grid;
  gap: 20px;
  height: 100vh;

/* Change the values  ???? to experiment */
  grid-template-rows: 200px auto 100px;
}

Свойство grid-template-areas

Это свойство указывает количество мест, которые ячейка сетки должна занимать в столбцах и строках родительского контейнера.

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

Назовем это чертежом нашего макета.

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

grid-template-areas: родительское свойство, которое будет создавать чертеж;
grid-area: дочернее свойство, которое будет следовать за чертежом.

Сначала создайте чертеж внутри родительского класса .container:

			.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Выберите все дочерние классы .box-* и установите такие значения:

			.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

Примечание: Мы ещё обсудим свойство grid-area в разделе о дочерних свойствах сетки.

Свойство column-gap

Это свойство используется для размещения промежутков между столбцами внутри сетки.

Напишите в CSS следующее:

			.container {
  display: grid;
  height: 100vh;

  grid-template-columns: 100px 100px 100px;
//Change values???? to experiment
  column-gap:  50px;
}

Примечание: column-gap работает с grid-template-columns.

Свойство row-gap

Это свойство размещает промежутки между строками.

Проверяем:

			.container {
  display: grid;
  height: 100vh;

  grid-template-rows: 100px 100px 100px;
// Change   ????  values to experiment
  row-gap:  50px;
}

Примечание: row-gap работает с grid-template-rows.

Свойство justify-items

Это свойство позиционирует дочерние элементы сетки внутри контейнеров вдоль оси X. Имеется 4 значения:

Если вы хотите проверить его, добавьте новое поле внутри HTML:

			<div class="container">

  <!--Other boxes - A, B, C are here-->

  <div class="box-4"> D </div>
</div>

Настройте CSS:

			.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values ????  to experiment
  justify-items : end;
}

Свойство align-items

Свойство позиционирует дочерние элементы сетки внутри контейнера вдоль оси Y.

Возможны следующие 4 значения.

Не изменяйте ничего в HTML, но в CSS напишите:

			.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values ????  to experiment
  align-items: center;
}

Свойство justify-content

Свойство позиционирует всю сетку внутри контейнера вдоль оси X. Имеется 7 значений.

Не изменяйте ничего в HTML, но в CSS напишите:

			.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values  ????  to experiment
  justify-content: center;
}

Свойство align-content

Свойство позиционирует всю сетку внутри контейнера вдоль оси Y. Имеется 7 значений.

Не изменяйте ничего в HTML, но в CSS напишите:

			.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values ????  to experiment
  align-content : center;
}

Свойства дочерних элементов сетки CSS

Теперь давайте рассмотрим дочерние свойства Grid.

Масштаб сетки CSS

Сделаем схему сетки. Она нужна, чтобы показать, как рассчитать соединение строк и столбцов. Для расчётов мы можем использовать любой их двух типов измерения:

Цифру — 1, 2, 3, 4 и т.д.
Ключевое слово span.

Совсем скоро вы поймёте, как работает это руководство.

На рисунке ниже показаны начальные и конечные точки строк и столбцов одной сетки.

HTML

Чтобы поэкспериментировать с масштабом сетки и понять дочерние свойства, создайте четыре бокса внутри тега body:

			<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
  <div class="box-4"> D </div>
</div>

Используем функцию repeat(). Она повторяет наш код определенное количество раз. Вот пример:

			grid-template-columns : repeat(5,1fr);

Это эквивалентно написанию следующего:

			grid-template-columns : 1fr 1fr 1fr 1fr 1fr ;

Когда мы используем единицу fr (дробное число), мы делим экран на равные части.

			grid-template-columns: repeat(5, 1fr);

Этот код делит наш экран на 5 равных столбцов.

Мы готовы, давайте начнем!

Grid-column: свойства start и end

Эти два свойства используются для объединения нескольких колонок. Это сокращение двух свойств:

grid-column-start;
grid-column-end.

Напишите этот код в CSS:

			.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

Результат выглядит следующим образом:

Здесь мы делим наш экран — как по ширине, так и по высоте — на 12 равных частей.

Одна ячейка занимает одну часть или одну дробь 1fr. Остальные 8 ячеек пусты.

Поскольку мы имеем дело с дочерними свойствами, нам нужно нацелить наши классы .box-* следующим образом:

			.box-1{}
.box-2{}
.box-3{}
.box-4{}

Вы можете экспериментировать с любыми ячейками, я буду использовать .box-1.

Зададим масштаб нашей сетке. Пока мы имеем дело только с колонками, а не со строками.

Масштаб по умолчанию для каждого класса .box-*:

			grid-column-start : 1;
grid-column-end : 2;

/* The shorthand -> */
 grid-column : 1 / 2

Мы можем записать это в единице измерения span:

			grid-column : span 1;

Добавим пустые 8 колонок в .box-1 вот так:

			.box-1{
grid-column : 1/10
}

Результат выглядит следующим образом:

Как вышло, что нам нужны 8 колонок, а мы записываем 10?

Box-1 сам по себе занимает 1 блок. И поверх него мы добавляем еще 8 блоков. Кроме того, нам нужно добавить ещё один, чтобы обозначить конец, так что 8+1+1+1 = 10.

Если вам сложно понять, как это работает, используйте span, оно проще для понимания.

В span нужно добавить 8 ячеек к .box-1, который уже занимает одну ячейку. Таким образом, получится 8+1 = 9.

			.box-1{
  grid-column : span 9;
}

Это приведет к тому же результату.

Свойства grid-row: start/end

Эти два свойства используются для объединения нескольких строк.

Это сокращение двух свойств:

grid-row-start;
grid-row-end.

Здесь мы будем использовать .box-1. Теперь сосредоточимся только на строках, а не столбцах.

Добавим 9 блоков к .box-1 вдоль строки.

Напишите этот код:

			.box-1{
  grid-row : 1/11;
}

Расчет выглядит следующим образом: .box-1 вмещает 1 блок, и вы добавляете еще 9 блоков, плюс обязательная 1 в конце. Получается 9+1+1=11.

Вот альтернатива с использованием span:

			.box-1{
  grid-row : span 10;
}

Здесь .box-1 вмещает один блок, и вы добавляете еще 9 блоков. Получается 9+1=10.

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

Свойство grid-area

Для него сперва нужно настроить grid-template-areas. После этого нужно указать имена родительских классов в дочерних классах:

Затем нужно настроить grid-template-areas внутри родительского контейнера:

			.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Затем укажем имена родительских контейнеров внутри дочерних классов с помощью grid-areas.

			.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

Свойство justify-self

Это свойство используется для позиционирования одного дочернего элемента сетки внутри контейнера вдоль оси X. Есть 4 значения.

Напишите этот код, чтобы поэкспериментировать со значениями:

			.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Помните, что свойство действует только на дочерние классы.

Итак, выберите любой класс .box-*. Мы покажем пример на первом блоке:

			.box-1 {
/*  Change values ????  to experiment */
  justify-self : start;  
}

Свойство align-self

Свойство используется для позиционирования одного дочернего элемента сетки внутри контейнера вдоль оси Y. Есть 4 значения.

Поэкспериментируем со значениями:

			.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Помните! Свойство действует только на дочерние классы. Выберите любой класс .box-*. Мы используем первый бокс:

			.box-1 {
/*  Change values ????  to experiment */
  align-self : start;  
}

Сокращение для свойств сетки CSS

Давайте рассмотрим сокращенные свойства Grid:

place-content;
place-items;
place-self;
grid-template;
gap / grid-gap.

place-content

Это сокращенное обозначение двух свойств:

align-content;
justify-content.

			align-content : center;
justify-content : end;

/* The shorthand */
place-content : center / end ;

place-items

Это сокращенное обозначение двух свойств:

align-items;
justify-items.

			align-items : end;
justify-items : center;

/* The shorthand */
place-items : end / center ;

place-self

Это сокращенное обозначение двух свойств:

align-self;
justify-self.

			align-self : start ;
justify-self : end ;

/* The shorthand */
place-self : start / end ;

grid-template

Это сокращенное обозначение двух свойств:

grid-template-rows;
grid-template-columns.

			grid-template-rows : 100px 100px;
grid-template-columns : 200px 200px;

/* The shorthand */
grid-template : 100px 100px / 200px 200px;

gap/grid-gap

Gap и grid-gap — это одно и то же сокращение. Вы можете использовать любое из них.

Это сокращенное обозначение двух свойств:

row-gap;
column-gap.

			row-gap : 20px ; 
column-gap : 30px ;

/* The shorthand */
gap : 20px  30px;

Заключение

Теперь вы можете уверенно делать отзывчивые макеты сайтов, используя знания о сетке!

Спасибо за то, что вы дочитали до конца.