Как работают 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: