0Pricing
CSS Academy · Урок

repeat() и minmax() в Grid

Создавайте несколько дорожек сетки и задавайте гибкие диапазоны размеров с помощью repeat() и minmax().

«repeat() и minmax() в Grid» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

repeat() в контексте Grid

repeat(count, track-size) — это функция CSS Grid, которая создаёт несколько определений треков без повторения кода. Она работает внутри grid-template-columns и grid-template-rows.

repeat() с фиксированным количеством

Создайте 4 столбца одинаковой ширины:

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

repeat() с шаблоном

Повторяйте шаблон треков:

  <div class="striped-grid">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
  </div>

minmax() внутри треков

minmax(min, max) задаёт диапазон размеров трека:

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

auto-fit с minmax()

Шаблон адаптивной сетки:

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

minmax(min-content, max-content)

Для размеров треков можно использовать ключевые слова внутреннего размера:

  <div class="labels">
    <div>Label</div><div>Value</div>
  </div>

minmax() в строках

Используйте minmax() для строк, чтобы разрешить задаваемую содержимым высоту с минимальным значением:

  <div class="gallery"><div>1</div><div>2</div></div>

fit-content() для столбцов

fit-content(max) делает трек настолько широким, насколько требует его содержимое, но не больше заданного максимума, — подобно max-content, но с ограничением:

  <div class="layout"><div>Sidebar</div><div>Main</div></div>

Объединение repeat() и именованных линий

Повторяйте именованные линии, чтобы обращаться к отдельным столбцам по имени:

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

auto-fill с minmax для элементов фиксированного размера

Когда элементы не должны растягиваться за пределы своего естественного размера:

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div>
  </div>

fr и проценты в Grid

В отличие от процентов, единицы fr автоматически учитывают пространство, занятое gap. repeat(3, 1fr) с gap: 24px создаёт 3 действительно одинаковых столбца. При использовании процентов для вычитания gap потребуется calc().

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

Что определяет repeat(3, minmax(100px, 1fr))?

Итоги

repeat(count, track) создаёт несколько треков без повторения кода. minmax(min, max) задаёт гибкие диапазоны размеров треков. Шаблон repeat(auto-fit, minmax(280px, 1fr)) — самый мощный вариант адаптивной сетки: ноль медиазапросов и автоматически адаптивные столбцы. Используйте fit-content(max) для столбцов боковой панели, размер которых зависит от содержимого.

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

Урок «repeat() и minmax() в Grid» бесплатный?

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

Чему я научусь в уроке «repeat() и minmax() в Grid»?

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

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

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

Сколько времени занимает урок «repeat() и minmax() в Grid»?

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

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

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

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

  1. calc() для динамических вычислений
  2. min(), max() и clamp() для плавных значений
  3. repeat() и minmax() в Grid
  4. color-mix() и относительный синтаксис цвета
← Назад к CSS Academy