Auto-fit и auto-fill с minmax
Автоматически создавайте адаптивное количество столбцов, используя auto-fit и auto-fill вместе с minmax().
«Auto-fit и auto-fill с minmax» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Автоматически адаптивная сетка
Самый мощный шаблон CSS Grid: полностью адаптивная сетка, которая автоматически изменяет количество столбцов без медиазапросов, используя auto-fit или auto-fill в сочетании с minmax().
auto-fill
auto-fill заполняет строку максимально возможным количеством столбцов при заданном минимальном размере. Пустые столбцы сохраняются как пустые треки в конце.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit работает подобно auto-fill, но сворачивает пустые треки до нулевой ширины. Существующие элементы растягиваются, заполняя оставшееся пространство.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Различие между auto-fill и auto-fit
Различие имеет значение только тогда, когда элементов меньше, чем может поместиться в строке:
auto-fill: пустые треки столбцов сохраняются, элементы не растягиваются, чтобы заполнить строкуauto-fit: пустые треки сворачиваются, элементы расширяются на всю доступную ширину
auto-fit с minmax()
Известный шаблон адаптивной сетки: элементы имеют ширину не менее 250px, растягиваются, заполняя пространство, и автоматически переносятся на новые строки:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Объяснение minmax()
minmax(min, max) задаёт диапазон размера трека. Трек не будет меньше min или больше max. В сочетании с fr это создаёт гибкие треки, ограниченные минимальным размером.
<div class="track"><div>Flexible track</div></div>auto-fill с minmax для фиксированных элементов
Если требуется, чтобы элементы имели фиксированный размер, а в конце оставалось пустое пространство:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Адаптивность без медиазапросов
В этом заключается главное преимущество: repeat(auto-fit, minmax(280px, 1fr)) автоматически адаптируется от одного столбца на мобильных устройствах до максимально возможного количества столбцов на больших экранах:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>min() для более безопасного minmax
Избегайте проблем с раскладкой в маленьких контейнерах, используя min(100%, 280px) в качестве минимального значения вместо необработанного значения в пикселях:
<div class="grid"><div>Item</div></div>auto-fill для выравнивания в стиле каменной кладки
При использовании auto-fill пустые треки в конце сохраняют выравнивание, если количество элементов не кратно количеству столбцов. Это полезно для создания единообразных сеток.
Внутреннее вычисление размеров сетки и флексбокс
Флексбокс с flex-wrap + flex: 1 1 250px работает похоже, но не гарантирует одинаковую ширину столбцов — элементы могут растягиваться неравномерно. Сетка с minmax обеспечивает совершенно одинаковые треки.
Быстрая проверка
Какое значение сетки создаёт адаптивные столбцы без медиазапросов, сворачивая пустые треки, чтобы элементы заполняли доступное пространство?
Повторение
repeat(auto-fit, minmax(250px, 1fr)) — самый мощный шаблон адаптивной сетки: медиазапросы не нужны. auto-fit сворачивает пустые треки, чтобы элементы заполняли строку. auto-fill сохраняет пустые треки для единообразного выравнивания. Всегда сочетайте эти значения со свойством промежутка gap.
Часто задаваемые вопросы
Урок «Auto-fit и auto-fill с minmax» бесплатный?
Да — полный текст урока «Auto-fit и auto-fill с minmax» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Auto-fit и auto-fill с minmax»?
Автоматически создавайте адаптивное количество столбцов, используя auto-fit и auto-fill вместе с minmax(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Auto-fit и auto-fill с minmax»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Именованные линии и области сетки
- Auto-fit и auto-fill с minmax
- Неявная сетка и Grid-Auto-Flow
- Subgrid для выравнивания вложенного содержимого