Введение в Grid Layout [Модуль 7: CSS Grid Layout]: Тренажер CSS

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

На этой странице собраны упражнения для знакомства с основами CSS Grid Layout. Вы начнете с создания простого grid-контейнера, научитесь определять строки и столбцы с использованием различных единиц измерения, а также добавлять отступы между элементами сетки. Эти задания помогут вам понять базовые принципы построения сеток с помощью Grid, не углубляясь в позиционирование элементов.

Список тем

Создание Grid-контейнера

id: 37270_grid-intro-1

Превратите обычный div-контейнер в grid-контейнер. Это foundational step для использования всех возможностей Grid Layout. Элементы внутри пока останутся без изменений, но контейнер будет готов к дальнейшей настройке сетки.

CSS

.container {
  /* Сделайте этот div grid-контейнером */
  input1: input2;
  border: 2px solid #6a1b9a;
  padding: 10px;
  background-color: #e1bee7;
}

.item {
  border: 1px solid #4a148c;
  background-color: #f3e5f5;
  padding: 15px;
  text-align: center;
}

                     .container {
  /* Сделайте этот div grid-контейнером */
  input1: input2;
  border: 2px solid #6a1b9a;
  padding: 10px;
  background-color: #e1bee7;
}

.item {
  border: 1px solid #4a148c;
  background-color: #f3e5f5;
  padding: 15px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Чтобы элемент стал grid-контейнером, ему необходимо задать CSS-свойство `display` со значением `grid`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Определение столбцов

id: 37270_grid-intro-2

Теперь, когда у вас есть grid-контейнер, задайте ему три столбца одинаковой ширины. Используйте единицы `fr`, чтобы столбцы гибко занимали все доступное пространство контейнера.

CSS

.container {
  display: grid;
  /* Задайте три равных столбца */
  input1: input2;
  border: 2px solid #00695c;
  padding: 10px;
  background-color: #b2dfdb;
}

.item {
  border: 1px solid #004d40;
  background-color: #e0f2f1;
  padding: 15px;
  text-align: center;
}

                     .container {
  display: grid;
  /* Задайте три равных столбца */
  input1: input2;
  border: 2px solid #00695c;
  padding: 10px;
  background-color: #b2dfdb;
}

.item {
  border: 1px solid #004d40;
  background-color: #e0f2f1;
  padding: 15px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>

Для определения столбцов сетки используется свойство `grid-template-columns`. Чтобы создать три равных гибких столбца, можно использовать значение `1fr 1fr 1fr` или более короткую запись с функцией `repeat()`, например `repeat(3, 1fr)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Определение строк

id: 37270_grid-intro-3

В дополнение к столбцам, определите две строки для grid-контейнера. Первая строка должна иметь высоту 50px, а вторая - 80px.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Задайте две строки высотой 50px и 80px */
  input1: input2;
  border: 2px solid #ef6c00;
  padding: 10px;
  background-color: #ffe0b2;
}

.item {
  border: 1px solid #e65100;
  background-color: #fff3e0;
  padding: 10px;
  text-align: center;
}

                     .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Задайте две строки высотой 50px и 80px */
  input1: input2;
  border: 2px solid #ef6c00;
  padding: 10px;
  background-color: #ffe0b2;
}

.item {
  border: 1px solid #e65100;
  background-color: #fff3e0;
  padding: 10px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Для определения строк сетки используется свойство `grid-template-rows`. Укажите нужные высоты через пробел, например `50px 80px`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление отступов между столбцами

id: 37270_grid-intro-4

Создайте пространство между столбцами сетки. Установите отступ между столбцами равным 15px.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Добавьте отступ 15px между столбцами */
  input1: 15px;
  border: 2px solid #1565c0;
  padding: 10px;
  background-color: #bbdefb;
}

.item {
  border: 1px solid #0d47a1;
  background-color: #e3f2fd;
  padding: 15px;
  text-align: center;
}

                     .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Добавьте отступ 15px между столбцами */
  input1: 15px;
  border: 2px solid #1565c0;
  padding: 10px;
  background-color: #bbdefb;
}

.item {
  border: 1px solid #0d47a1;
  background-color: #e3f2fd;
  padding: 15px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Колонка 1</div>
  <div class="item">Колонка 2</div>
  <div class="item">Колонка 3</div>
  <div class="item">Колонка 4</div>
</div>

Для добавления отступов между столбцами используется свойство `grid-column-gap` или его современный псевдоним `column-gap`. Задайте ему значение `15px`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление отступов между строками

id: 37270_grid-intro-5

Аналогично предыдущему заданию, добавьте теперь пространство между строками сетки. Установите отступ между строками равным 10px.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  /* Добавьте отступ 10px между строками */
  input1: 10px;
  border: 2px solid #ad1457;
  padding: 10px;
  background-color: #f8bbd0;
}

.item {
  border: 1px solid #880e4f;
  background-color: #fce4ec;
  padding: 15px;
  text-align: center;
}

                     .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  /* Добавьте отступ 10px между строками */
  input1: 10px;
  border: 2px solid #ad1457;
  padding: 10px;
  background-color: #f8bbd0;
}

.item {
  border: 1px solid #880e4f;
  background-color: #fce4ec;
  padding: 15px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Строка 1</div>
  <div class="item">Строка 1</div>
  <div class="item">Строка 2</div>
  <div class="item">Строка 2</div>
  <div class="item">Строка 3</div>
  <div class="item">Строка 3</div>
</div>

Для добавления отступов между строками используется свойство `grid-row-gap` или его современный псевдоним `row-gap`. Задайте ему значение `10px`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Использование сокращенного свойства для отступов

id: 37270_grid-intro-6

Задайте отступы между строками и столбцами одновременно, используя сокращенное свойство. Установите отступ между строками 20px, а между столбцами 10px.

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 60px);
  /* Задайте отступ 20px для строк и 10px для столбцов */
  input1: input2;
  border: 2px solid #2e7d32;
  padding: 10px;
  background-color: #c8e6c9;
}

.item {
  border: 1px solid #1b5e20;
  background-color: #e8f5e9;
  padding: 15px;
  text-align: center;
}

                     .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 60px);
  /* Задайте отступ 20px для строк и 10px для столбцов */
  input1: input2;
  border: 2px solid #2e7d32;
  padding: 10px;
  background-color: #c8e6c9;
}

.item {
  border: 1px solid #1b5e20;
  background-color: #e8f5e9;
  padding: 15px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Используйте сокращенное свойство `gap` (или его старый вариант `grid-gap`). Первое значение задает отступ между строками (`row-gap`), второе - между столбцами (`column-gap`). Например: `gap: 20px 10px;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Столбцы разной ширины с `fr`

id: 37270_grid-intro-7

Создайте сетку из трех столбцов. Первый и третий столбцы должны занимать по одной доле доступного пространства (1fr), а средний столбец должен быть в два раза шире (2fr).

CSS

.container {
  display: grid;
  /* Задайте столбцы шириной 1fr, 2fr, 1fr */
  grid-template-columns: input1;
  gap: 10px;
  border: 2px solid #4527a0;
  padding: 10px;
  background-color: #d1c4e9;
}

.item {
  border: 1px solid #311b92;
  background-color: #ede7f6;
  padding: 15px;
  text-align: center;
}

                     .container {
  display: grid;
  /* Задайте столбцы шириной 1fr, 2fr, 1fr */
  grid-template-columns: input1;
  gap: 10px;
  border: 2px solid #4527a0;
  padding: 10px;
  background-color: #d1c4e9;
}

.item {
  border: 1px solid #311b92;
  background-color: #ede7f6;
  padding: 15px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Узкий</div>
  <div class="item">Широкий</div>
  <div class="item">Узкий</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Используйте свойство `grid-template-columns`. Задайте ширину столбцов через пробел, используя единицы `fr`: `1fr 2fr 1fr`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комбинирование единиц измерения для столбцов

id: 37270_grid-intro-8

Определите три столбца с разными единицами измерения. Первый столбец должен иметь фиксированную ширину 80px, третий столбец должен автоматически подстраиваться под ширину своего содержимого (`auto`), а второй столбец должен занимать все оставшееся доступное пространство (`1fr`).

CSS

.container {
  display: grid;
  /* Задайте столбцы: 80px, 1fr, auto */
  input1: input2;
  gap: 5px;
  border: 2px solid #bf360c;
  padding: 10px;
  background-color: #ffccbc;
}

.item {
  border: 1px solid #dd2c00;
  background-color: #fbe9e7;
  padding: 15px;
  text-align: center;
}

                     .container {
  display: grid;
  /* Задайте столбцы: 80px, 1fr, auto */
  input1: input2;
  gap: 5px;
  border: 2px solid #bf360c;
  padding: 10px;
  background-color: #ffccbc;
}

.item {
  border: 1px solid #dd2c00;
  background-color: #fbe9e7;
  padding: 15px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">80px</div>
  <div class="item">Гибкий</div>
  <div class="item">Авто</div>
  <div class="item">Фикс</div>
  <div class="item">1fr</div>
  <div class="item">Содержимое</div>
</div>

В свойстве `grid-template-columns` можно комбинировать разные единицы. Используйте значение `80px 1fr auto`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку