Создание сетки: grid-template-columns: Тренажер CSS

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

Этот набор упражнений посвящен свойству `grid-template-columns` в CSS Grid Layout. Вы потренируетесь создавать различные сеточные структуры, определяя количество, размеры и поведение колонок в грид-контейнере. Задания охватывают использование фиксированных и гибких единиц измерения, функции `repeat()`, `minmax()`, ключевые слова `auto`, `fit-content()` и их комбинации. Каждое задание представляет собой HTML-структуру и CSS-стили с пропусками, которые вам предстоит заполнить, чтобы достичь нужного визуального результата. Цель — закрепить понимание того, как `grid-template-columns` управляет горизонтальной структурой сетки.

Список тем

Три колонки одинаковой ширины

Создайте простую сетку из трех колонок. Все колонки должны занимать равную долю доступного пространства внутри контейнера. Используйте единицы измерения `fr`.

CSS

.grid-container {
  display: grid;
  input1: input2;
  gap: 10px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  max-width: 350px; /* Учитываем iframe */
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #333;
}

                     .grid-container {
  display: grid;
  input1: input2;
  gap: 10px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  max-width: 350px; /* Учитываем iframe */
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #333;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Фиксированная и гибкая колонки

Разделите контейнер на две колонки. Первая колонка должна иметь фиксированную ширину 100 пикселей, а вторая должна занимать все оставшееся доступное пространство.

CSS

.grid-container {
  display: grid;
  grid-template-columns: input1 input2;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  max-width: 350px;
}

.item {
  background-color: #007bff;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #0056b3;
}

                     .grid-container {
  display: grid;
  grid-template-columns: input1 input2;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  max-width: 350px;
}

.item {
  background-color: #007bff;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #0056b3;
}

HTML

<div class="grid-container">
  <div class="item">1 (100px)</div>
  <div class="item">2 (auto)</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Колонки с разными долями

Создайте сетку из трех колонок. Первая колонка должна занимать одну долю пространства, вторая - две доли, а третья - снова одну долю.

CSS

.grid-container {
  display: grid;
  input1: 1fr input2 1fr;
  gap: 5px;
  padding: 10px;
  background-color: #e9ecef;
  border: 1px solid #adb5bd;
  max-width: 350px;
}

.item {
  background-color: #6f42c1;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #4a2c82;
}

                     .grid-container {
  display: grid;
  input1: 1fr input2 1fr;
  gap: 5px;
  padding: 10px;
  background-color: #e9ecef;
  border: 1px solid #adb5bd;
  max-width: 350px;
}

.item {
  background-color: #6f42c1;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #4a2c82;
}

HTML

<div class="grid-container">
  <div class="item">1 (1fr)</div>
  <div class="item">2 (2fr)</div>
  <div class="item">3 (1fr)</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Использование функции repeat()

Создайте сетку из четырех одинаковых колонок, используя функцию `repeat()`. Каждая колонка должна занимать равную часть доступного пространства.

CSS

.grid-container {
  display: grid;
  grid-template-columns: input1(input2, input3);
  gap: 8px;
  padding: 8px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  max-width: 350px;
}

.item {
  background-color: #ffc107;
  color: #333;
  padding: 20px;
  text-align: center;
  border: 1px solid #e0a800;
}

                     .grid-container {
  display: grid;
  grid-template-columns: input1(input2, input3);
  gap: 8px;
  padding: 8px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  max-width: 350px;
}

.item {
  background-color: #ffc107;
  color: #333;
  padding: 20px;
  text-align: center;
  border: 1px solid #e0a800;
}

HTML

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

Примените свойство `grid-template-columns`. Используйте функцию `repeat()`: первым аргументом укажите количество повторений (4), а вторым — размер повторяемого трека (`1fr`).

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

Результат

Сообщения

Выполнить

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

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

Колонка по содержимому (auto)

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr input1 1fr;
  gap: 10px;
  padding: 10px;
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  max-width: 350px;
}

.item {
  background-color: #17a2b8;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #117a8b;
}

.item-auto {
  /* Ширина этой колонки будет зависеть от контента */
  white-space: nowrap; /* Чтобы текст не переносился */
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr input1 1fr;
  gap: 10px;
  padding: 10px;
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  max-width: 350px;
}

.item {
  background-color: #17a2b8;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #117a8b;
}

.item-auto {
  /* Ширина этой колонки будет зависеть от контента */
  white-space: nowrap; /* Чтобы текст не переносился */
}

HTML

<div class="grid-container">
  <div class="item">Гибкая</div>
  <div class="item item-auto">Авто</div>
  <div class="item">Гибкая</div>
</div>

Используйте `grid-template-columns`. Для первой и третьей колонок укажите `1fr`. Для второй колонки используйте ключевое слово `auto`, чтобы ее ширина определялась содержимым.

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

Результат

Сообщения

Выполнить

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

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

Гибкие колонки с minmax()

Создайте сетку из двух колонок. Первая колонка должна иметь минимальную ширину 80px, но может растягиваться, занимая одну долю доступного пространства (`1fr`). Вторая колонка должна иметь фиксированную ширину 120px.

CSS

.grid-container {
  display: grid;
  grid-template-columns: input1(input2, 1fr) 120px;
  gap: 15px;
  padding: 10px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  max-width: 350px;
}

.item {
  background-color: #dc3545;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #bd2130;
}

                     .grid-container {
  display: grid;
  grid-template-columns: input1(input2, 1fr) 120px;
  gap: 15px;
  padding: 10px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  max-width: 350px;
}

.item {
  background-color: #dc3545;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #bd2130;
}

HTML

<div class="grid-container">
  <div class="item">Мин 80px, Макс 1fr</div>
  <div class="item">120px</div>
</div>

Используйте `grid-template-columns`. Для первой колонки примените функцию `minmax()`, указав минимальную ширину `80px` и максимальную `1fr`. Для второй колонки укажите `120px`.

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

Результат

Сообщения

Выполнить

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

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

Колонка с fit-content()

Создайте сетку из трех колонок. Первая колонка должна занимать `1fr`. Вторая колонка должна использовать `fit-content()` с ограничением ширины в 150px. Третья колонка также должна занимать `1fr`.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr input1(150px) 1fr;
  gap: 10px;
  padding: 10px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  max-width: 350px;
}

.item {
  background-color: #28a745;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #1e7e34;
}

.item-fit {
  /* Ширина будет по контенту, но не более 150px */
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr input1(150px) 1fr;
  gap: 10px;
  padding: 10px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  max-width: 350px;
}

.item {
  background-color: #28a745;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #1e7e34;
}

.item-fit {
  /* Ширина будет по контенту, но не более 150px */
}

HTML

<div class="grid-container">
  <div class="item">1fr</div>
  <div class="item item-fit">fit-content(150px)</div>
  <div class="item">1fr</div>
</div>

Используйте `grid-template-columns`. Для первой и третьей колонок задайте `1fr`. Для второй колонки используйте функцию `fit-content()`, передав ей в качестве аргумента максимальную ширину `150px`.

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

Результат

Сообщения

Выполнить

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

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

Сложный шаблон с repeat()

Создайте сетку, используя `repeat()`. Шаблон должен повторяться дважды и состоять из колонки шириной 50px, за которой следует колонка, занимающая 1fr.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(input1, input2 input3);
  gap: 5px;
  padding: 5px;
  background-color: #cce5ff;
  border: 1px solid #b8daff;
  max-width: 350px;
}

.item {
  background-color: #007bff;
  color: white;
  padding: 10px 5px;
  text-align: center;
  border: 1px solid #0056b3;
  font-size: 12px; /* Меньший шрифт для узких колонок */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(input1, input2 input3);
  gap: 5px;
  padding: 5px;
  background-color: #cce5ff;
  border: 1px solid #b8daff;
  max-width: 350px;
}

.item {
  background-color: #007bff;
  color: white;
  padding: 10px 5px;
  text-align: center;
  border: 1px solid #0056b3;
  font-size: 12px; /* Меньший шрифт для узких колонок */
}

HTML

<div class="grid-container">
  <div class="item">50px</div>
  <div class="item">1fr</div>
  <div class="item">50px</div>
  <div class="item">1fr</div>
</div>

Используйте `grid-template-columns` и функцию `repeat()`. Первым аргументом `repeat()` укажите количество повторений (2). Вторым аргументом укажите шаблон, который нужно повторить: `50px 1fr`.

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

Результат

Сообщения

Выполнить

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

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