Как работают auto-fill и auto-fit в CSS Grid
auto-fill
и auto-fit
это очень полезные инструменты при работе с CSS Grid и создании адаптивного шаблона.
В этой статье вы узнаете о том, как работает эти два свойства и в чем их разница.
Перевод статьи Responsive layout with CSS grid, part 2: auto-fill & auto-fit
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Сейчас мы посмотрим на ещё одну фичу в CSS Grid, которая поможет вам в создании адаптивного шаблона: это auto-fill
и auto-fit
. Эти два слова могут использоваться как значения при указании ширины колонок в CSS Grid.
У них очень схожие названия и их поведение тоже очень схоже, но у них всё-таки есть небольшие различия. Сейчас попытаемся вам их объяснить:
Начнем с простого HTML:
<div id="container">
<div class="el">ONE</div>
<div class="el">TWO</div>
<div class="el">THREE</div>
</div>
И CSS:
#container {
color: white;
background-color: lightgray;
font-family: sans-serif;
display: grid;
}
.el {
padding: 1.5rem;
background-color: dimgray;
border: 1px darkgray solid;
}
Дальше мы собираемся использовать CSS функцию repeat()
, которая позволяет определять множество колонок или строк (используя grid-template-columns
и grid-template-rows
) в более укороченном варианте. Первый параметр это число повторений, а второй это то, что вы собираетесь повторять:
grid-template-columns: repeat(4, 100px); // Повторяет 100px 4 раза
И тут auto-fill
и auto-fit
помогут вам в создании куда более динамичных шаблонов:
auto-fill
Вместо того, чтобы указывать количество колонок и сколько раз им повторяться, мы просто можем сказать браузеру, чтобы он уместил как можно больше колонок с учетом указанной длины.
auto-fill
как бы говорит “я автоматически заполню строку таким количеством колонок, как это возможно с учетом заданной ширины”. auto-fill
используется в связке с repeat()
таким образом:
grid-template-columns: repeat(auto-fill, 100px);
Как вы видите, каждая строка заполнена возможным количеством колонок, учитывая их длину в 100px. Когда в строке не остается места, то элементы переходят на следующую строку.
minmax
minxmax()
функция в CSS, которую очень удобно использовать в связке с auto-fill
. Она позволяет вам указывать минимальное и максимальное значение одновременно. Если нам надо, чтобы колонки были минимум в 100px и максимум в 1fr (Оставшееся доступное место. Подробнее про неё можете прочитать тут. Что такое единица гибкости fr в CSS, доступным и простым языком), то колонки автоматически получат размер, чтобы заполнить строку:
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
Сейчас браузер уместит в строку столько колонок с минимальной шириной в 100px, сколько он сможет. А если останется ещё место, то оно будет поровну распределено между всеми автозаполненными колонками.
auto-fit
А давайте поменяем auto-fill
и auto-fit
местами, в первом примере с auto-fill
:
grid-template-columns: repeat(auto-fit, 100px);
Не такая уж и большая разница в сравнении с auto-fill
. Но явное различие появится тогда, когда вы укажете браузеру, что делать с оставшимся местом в строке.
minmax
Итак, давайте снова добавим minmax()
:
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
auto-fit
будет вести себя почти как auto-fill
, но если есть только одна строка и есть место для дополнительных колонок, но нет элементов, которые можно вставить эти колонки, то тогда он сделает ширину пустых колонок равную нулю. А если выставить максимальную ширину колонок на 1fr, то браузер разделит оставшееся место поровну между ними.
Вы можете поиграться с этим на Codepen: