CSS Academy · Урок

Единица fr и Repeat

Используйте дробную единицу fr и функцию repeat() для создания гибких дорожек сетки.

«Единица fr и Repeat» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое единица fr

Единица fr (дробная единица) используется только в CSS Grid. Она представляет собой долю оставшегося свободного пространства контейнера сетки после задания размеров всех негибких треков.

Простой пример с fr

Два одинаковых столбца, каждый из которых получает половину доступного пространства:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>

Смешанные треки

Пространство для fr вычисляется после вычитания фиксированных треков:

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

Неравные доли

Разные значения fr создают пропорциональные столбцы:

<div class="thirds" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>

Функция repeat()

repeat() избавляет от повторного указания одинакового размера трека. Первый аргумент задаёт количество повторений, второй — размер трека.

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>

repeat() со смешанными треками

Можно повторять узор из треков:

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>

auto-fill

repeat(auto-fill, ...) создаёт столько столбцов заданного размера, сколько помещается в контейнере. Пустые треки сохраняются в конце.

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>

auto-fit

repeat(auto-fit, ...) работает подобно auto-fill, но сворачивает пустые треки, позволяя существующим элементам растягиваться и заполнять контейнер.

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>

minmax() в repeat

minmax(min, max) задаёт диапазон размеров трека. В сочетании с auto-fit это позволяет создать адаптивную сетку без медиазапросов:

<div class="responsive-grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>

fr и проценты

В отличие от процентов, fr автоматически исключает пространство под интервалы. 1fr 1fr с интервалом 24px создаёт два одинаковых столбца без каких-либо вычислений. Эквивалентная формула для процентов выглядела бы так: calc(50% - 12px).

fr с min-content и max-content

Объединяйте fr с размерами, зависящими от содержимого, чтобы создавать смешанные макеты:

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>

Быстрая проверка

Что создаёт repeat(auto-fit, minmax(200px, 1fr))?

Итоги

Единица fr пропорционально распределяет оставшееся пространство сетки. repeat() избавляет от повторяющихся объявлений треков. Мощный шаблон repeat(auto-fit, minmax(250px, 1fr)) создаёт полностью адаптивные сетки карточек без медиазапросов.

Часто задаваемые вопросы

Урок «Единица fr и Repeat» бесплатный?

Да — полный текст урока «Единица fr и Repeat» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Единица fr и Repeat»?

Используйте дробную единицу fr и функцию repeat() для создания гибких дорожек сетки. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Единица fr и Repeat»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy