Единица измерения fr: Тренажер CSS

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

Эта серия заданий посвящена единице измерения `fr` в CSS Grid Layout. `fr` (fractional unit) представляет собой долю доступного пространства в грид-контейнере. Вы будете практиковаться в создании гибких сеток, где размеры колонок или строк автоматически адаптируются к доступному пространству. Задания начинаются с основ использования `fr` и постепенно усложняются, охватывая комбинации с другими единицами, использование функций `repeat()` и `minmax()`.

Список тем

Две равные колонки

Создайте простую сетку из двух колонок одинаковой ширины. Используйте единицу `fr`, чтобы колонки занимали всё доступное пространство контейнера поровну.

CSS

.container {
  display: grid;
  /* Определите две колонки, каждая занимает 1 долю */
  grid-template-columns: input1 input2;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px; /* Для наглядности */
}

.item {
  background-color: #87CEEB;
  border: 1px solid #4682B4;
  padding: 20px;
  text-align: center;
}

                     .container {
  display: grid;
  /* Определите две колонки, каждая занимает 1 долю */
  grid-template-columns: input1 input2;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px; /* Для наглядности */
}

.item {
  background-color: #87CEEB;
  border: 1px solid #4682B4;
  padding: 20px;
  text-align: center;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Колонки разной пропорции

Разделите контейнер на три колонки. Первая колонка должна быть в два раза шире второй, а третья - такой же ширины, как и вторая. Используйте единицы `fr` для задания пропорций.

CSS

.container {
  display: grid;
  /* Задайте пропорции 2:1:1 для трех колонок */
  grid-template-columns: input1 input2 input3;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #90EE90;
  border: 1px solid #3CB371;
  padding: 20px;
  text-align: center;
}

                     .container {
  display: grid;
  /* Задайте пропорции 2:1:1 для трех колонок */
  grid-template-columns: input1 input2 input3;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #90EE90;
  border: 1px solid #3CB371;
  padding: 20px;
  text-align: center;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Сочетание fr и фиксированной ширины

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

CSS

.container {
  display: grid;
  /* Первая колонка 80px, третья 60px, вторая - остальное */
  grid-template-columns: 80px input1 60px;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #FFB6C1;
  border: 1px solid #FF69B4;
  padding: 20px;
  text-align: center;
  overflow: hidden; /* Предотвратить выход текста */
  white-space: nowrap; /* Предотвратить перенос текста */
}

                     .container {
  display: grid;
  /* Первая колонка 80px, третья 60px, вторая - остальное */
  grid-template-columns: 80px input1 60px;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #FFB6C1;
  border: 1px solid #FF69B4;
  padding: 20px;
  text-align: center;
  overflow: hidden; /* Предотвратить выход текста */
  white-space: nowrap; /* Предотвратить перенос текста */
}

HTML

<div class="container">
  <div class="item">80px</div>
  <div class="item">Гибкая</div>
  <div class="item">60px</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Гибкие строки

Теперь применим `fr` к строкам. Создайте сетку с двумя строками. Первая строка должна иметь фиксированную высоту 50px, а вторая должна занимать всё оставшееся вертикальное пространство контейнера.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr; /* Одна колонка для простоты */
  /* Первая строка 50px, вторая - остальное */
  input1: 50px input2;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 250px; /* Задаем высоту контейнера */
}

.item {
  background-color: #E6E6FA;
  border: 1px solid #9370DB;
  padding: 10px;
  text-align: center;
}

                     .container {
  display: grid;
  grid-template-columns: 1fr; /* Одна колонка для простоты */
  /* Первая строка 50px, вторая - остальное */
  input1: 50px input2;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 250px; /* Задаем высоту контейнера */
}

.item {
  background-color: #E6E6FA;
  border: 1px solid #9370DB;
  padding: 10px;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Строка 1 (50px)</div>
  <div class="item">Строка 2 (Гибкая)</div>
</div>

Используйте свойство `grid-template-rows`. Задайте первой строке фиксированную высоту (`50px`), а второй строке значение `1fr`, чтобы она растянулась на всю оставшуюся высоту.

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

Результат

Сообщения

Выполнить

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

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

Использование repeat() с fr

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

CSS

.container {
  display: grid;
  /* Используйте repeat() для создания 4 колонок по 1fr */
  grid-template-columns: input1(input2, input3);
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

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

                     .container {
  display: grid;
  /* Используйте repeat() для создания 4 колонок по 1fr */
  grid-template-columns: input1(input2, input3);
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #FFDAB9;
  border: 1px solid #FFA07A;
  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-template-columns` используйте функцию `repeat()`. Первым аргументом укажите количество повторений (4), а вторым — значение для каждого трека (`1fr`).

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

Результат

Сообщения

Выполнить

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

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

minmax() и fr

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

CSS

.container {
  display: grid;
  /* Первая колонка: min 100px, max 1fr. Вторая: 2fr */
  grid-template-columns: input1(100px, input2) input3;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #ADD8E6;
  border: 1px solid #87CEFA;
  padding: 20px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

                     .container {
  display: grid;
  /* Первая колонка: min 100px, max 1fr. Вторая: 2fr */
  grid-template-columns: input1(100px, input2) input3;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 150px;
}

.item {
  background-color: #ADD8E6;
  border: 1px solid #87CEFA;
  padding: 20px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

HTML

<div class="container">
  <div class="item">Min 100px, 1fr</div>
  <div class="item">2fr</div>
</div>

Используйте функцию `minmax()` для первой колонки в свойстве `grid-template-columns`. Задайте `minmax(100px, 1fr)`. Для второй колонки используйте `2fr`.

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

Результат

Сообщения

Выполнить

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

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

Сложная сетка с fr

Создайте сетку 2x2. Верхняя строка должна иметь высоту 60px. Нижняя строка должна занимать оставшееся пространство. Левая колонка должна быть в три раза шире правой колонки. Используйте `fr` для гибких размеров.

CSS

.container {
  display: grid;
  /* Строки: 60px и остальное */
  grid-template-rows: 60px input1;
  /* Колонки: пропорция 3 к 1 */
  grid-template-columns: input2 input3;
  gap: 15px;
  border: 1px solid #ccc;
  padding: 15px;
  height: 280px;
}

.item {
  background-color: #F0E68C;
  border: 1px solid #BDB76B;
  padding: 10px;
  text-align: center;
  display: flex; /* Для выравнивания */
  align-items: center;
  justify-content: center;
}

.item1 { background-color: #D2B48C; }
.item2 { background-color: #BC8F8F; }
.item3 { background-color: #F4A460; }
.item4 { background-color: #CD853F; }

                     .container {
  display: grid;
  /* Строки: 60px и остальное */
  grid-template-rows: 60px input1;
  /* Колонки: пропорция 3 к 1 */
  grid-template-columns: input2 input3;
  gap: 15px;
  border: 1px solid #ccc;
  padding: 15px;
  height: 280px;
}

.item {
  background-color: #F0E68C;
  border: 1px solid #BDB76B;
  padding: 10px;
  text-align: center;
  display: flex; /* Для выравнивания */
  align-items: center;
  justify-content: center;
}

.item1 { background-color: #D2B48C; }
.item2 { background-color: #BC8F8F; }
.item3 { background-color: #F4A460; }
.item4 { background-color: #CD853F; }

HTML

<div class="container">
  <div class="item item1">A (3fr, 60px)</div>
  <div class="item item2">B (1fr, 60px)</div>
  <div class="item item3">C (3fr, 1fr)</div>
  <div class="item item4">D (1fr, 1fr)</div>
</div>

Задайте `grid-template-rows` как `60px 1fr`. Задайте `grid-template-columns` как `3fr 1fr`.

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

Результат

Сообщения

Выполнить

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

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

Галерея изображений

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

CSS

.gallery {
  display: grid;
  /* Создайте 3 равные колонки */
  input1: input2(3, input3);
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.gallery img {
  width: 100%; /* Масштабируем изображение по ширине ячейки */
  height: auto; /* Сохраняем пропорции */
  display: block; /* Убираем лишние отступы */
  border: 1px solid #ddd;
}

                     .gallery {
  display: grid;
  /* Создайте 3 равные колонки */
  input1: input2(3, input3);
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.gallery img {
  width: 100%; /* Масштабируем изображение по ширине ячейки */
  height: auto; /* Сохраняем пропорции */
  display: block; /* Убираем лишние отступы */
  border: 1px solid #ddd;
}

HTML

<div class="gallery">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 3">
</div>

Установите контейнеру `display: grid;`. Используйте `grid-template-columns` со значением `repeat(3, 1fr)` или `1fr 1fr 1fr`, чтобы создать три равные колонки. Убедитесь, что изображения (`img`) масштабируются правильно внутри ячеек сетки, установив им `width: 100%;` и `height: auto;`.

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

Результат

Сообщения

Выполнить

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

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