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

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

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

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

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

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

Превью видео VXW1r09Y6Tw

Что такое CSS Grid

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

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

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

Вид на ПК:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Создайте папку с именем “Project-1” и откройте VS Code.
  2. Создайте файлы index.html и style.css.
  3. Установите 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;
}
		

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. grid-template-areas: родительское свойство, которое будет создавать чертеж;
  2. 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 Grid со шпаргалкой 13

Напишите в 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

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

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

Проверяем:

			.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 значения:

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

Если вы хотите проверить его, добавьте новое поле внутри 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 значения.

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

Не изменяйте ничего в 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 значений.

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

Не изменяйте ничего в 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 значений.

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

Не изменяйте ничего в 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. Цифру — 1, 2, 3, 4 и т.д.
  2. Ключевое слово span.
Полный самоучитель по CSS Grid со шпаргалкой 22

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Масштаб по умолчанию для каждого класса .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
}
		

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

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

Как вышло, что нам нужны 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

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

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

  1. grid-row-start;
  2. grid-row-end.

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

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

Добавим 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.

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

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

Свойство grid-area

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

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

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

Полный самоучитель по CSS Grid со шпаргалкой 30
			.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.

Полный самоучитель по CSS Grid со шпаргалкой 31
			.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}
		

Свойство justify-self

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

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

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

			.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 значения.

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

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

			.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:

  1. place-content;
  2. place-items;
  3. place-self;
  4. grid-template;
  5. gap / grid-gap.

place-content

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

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

  1. align-content;
  2. justify-content.
			align-content : center;
justify-content : end;

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

place-items

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

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

  1. align-items;
  2. justify-items.
			align-items : end;
justify-items : center;

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

place-self

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

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

  1. align-self;
  2. justify-self.
			align-self : start ;
justify-self : end ;

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

grid-template

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

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

  1. grid-template-rows;
  2. 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 — это одно и то же сокращение. Вы можете использовать любое из них.

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

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

  1. row-gap;
  2. column-gap.
			row-gap : 20px ; 
column-gap : 30px ;

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

Заключение

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

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

13К открытий16К показов