Сегодня мы изучим свойства CSS Grid, чтобы вы могли создавать адаптивные сайты. Мы объясним, как работает каждое из свойств Grid и дадим шпаргалку, которая охватывает все, что можно сделать с помощью Grid.
Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.
Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):
Grid — это схема или сетка для создания веб-сайтов.
Модель Grid позволяет компоновать содержимое вашего сайта. Кроме того, она помогает создавать структуры для адаптивных веб-сайтов. Ваш сайт будет хорошо выглядеть на ПК, на смартфоне и планшете.
Вот демо, сделанное на Grid в качестве основного чертежа.
Вид на ПК:
Мобильный вид:
Как работает архитектура Grid? Элементы Grid распределяются вдоль осей X и Y. Используя свойства Grid, вы можете создать макет сайта и управлять контентом на странице.
При этом в Grid вы можете объединять несколько строк и столбцов, как в программе Excel, что дает вам больше гибкости и возможностей, чем Flexbox.
Кстати, вот шпаргалка, которую я сделал для Flexbox, если вы хотите узнать об этом больше.
Вот шпаргалка, которая содержит все свойства Grid. Свойства сетки делятся на:
Примечание: Красным цветом выделены сокращенные свойства.
К концу этого урока у вас будет четкое понимание того, как всё это использовать.
Для этого проекта вам нужно знать немного HTML и CSS и как работать с VS-кодом. Сделайте следующее:
Или вы можете просто открыть 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.
Свойство 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
Это свойство указывает количество мест, которые ячейка сетки должна занимать в столбцах и строках родительского контейнера.
С этим свойством жизнь становится намного проще, так как оно позволяет нам видеть, что мы делаем.
Назовем это чертежом нашего макета.
Чтобы экспериментировать с ним, нужно понять свойства родительского и дочернего шаблонов:
Сначала создайте чертеж внутри родительского класса .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; }
Теперь давайте рассмотрим дочерние свойства Grid.
Масштаб сетки CSS
Сделаем схему сетки. Она нужна, чтобы показать, как рассчитать соединение строк и столбцов. Для расчётов мы можем использовать любой их двух типов измерения:
Совсем скоро вы поймёте, как работает это руководство.
На рисунке ниже показаны начальные и конечные точки строк и столбцов одной сетки.
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
Эти два свойства используются для объединения нескольких колонок. Это сокращение двух свойств:
Напишите этот код в 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
Эти два свойства используются для объединения нескольких строк.
Это сокращение двух свойств:
Здесь мы будем использовать .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; }
Давайте рассмотрим сокращенные свойства Grid:
place-content
Это сокращенное обозначение двух свойств:
align-content : center; justify-content : end; /* The shorthand */ place-content : center / end ; place-items
Это сокращенное обозначение двух свойств:
align-items : end; justify-items : center; /* The shorthand */ place-items : end / center ; place-self
Это сокращенное обозначение двух свойств:
align-self : start ; justify-self : end ; /* The shorthand */ place-self : start / end ; grid-template
Это сокращенное обозначение двух свойств:
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 : 20px ; column-gap : 30px ; /* The shorthand */ gap : 20px 30px;
Теперь вы можете уверенно делать отзывчивые макеты сайтов, используя знания о сетке!
Спасибо за то, что вы дочитали до конца.
Это — перевод оригинальной статьи на 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;
Заключение
Теперь вы можете уверенно делать отзывчивые макеты сайтов, используя знания о сетке!
Спасибо за то, что вы дочитали до конца.