Введение в Grid Layout: Тренажер CSS

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

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

Список тем

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

Превратите обычный 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Теперь, когда у вас есть 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)`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

В дополнение к столбцам, определите две строки для 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Создайте пространство между столбцами сетки. Установите отступ между столбцами равным 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Аналогично предыдущему заданию, добавьте теперь пространство между строками сетки. Установите отступ между строками равным 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Задайте отступы между строками и столбцами одновременно, используя сокращенное свойство. Установите отступ между строками 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`

Создайте сетку из трех столбцов. Первый и третий столбцы должны занимать по одной доле доступного пространства (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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Определите три столбца с разными единицами измерения. Первый столбец должен иметь фиксированную ширину 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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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