Как указывать id в css

Как работают auto-fill и auto-fit в CSS Grid

Stas Bagretsov

auto-fill и auto-fit это очень полезные инструменты при работе с CSS Grid и создании адаптивного шаблона.

В этой статье вы узнаете о том, как работает эти два свойства и в чем их разница.

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Сейчас мы посмотрим на ещё одну фичу в CSS Grid, которая поможет вам в создании адаптивного шаблона: это auto-fill и auto-fit . Эти два слова могут использоваться как значения при указании ширины колонок в CSS Grid.

У н и х очень схожие названия и их поведение тоже очень схоже, но у них всё-таки есть небольшие различия. Сейчас попытаемся вам их объяснить:

Начнем с простого HTML:

Дальше мы собираемся использовать CSS функцию repeat() , которая позволяет определять множество колонок или строк (используя grid-template-columns и grid-template-rows ) в более укороченном варианте. Первый параметр это число повторений, а второй это то, что вы собираетесь повторять:

И тут auto-fill и auto-fit помогут вам в создании куда более динамичных шаблонов:

auto-fill

Вместо того, чтобы указывать количество колонок и сколько раз им повторяться, мы просто можем сказать браузеру, чтобы он уместил как можно больше колонок с учетом указанной длины.

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

Как вы видите, каждая строка заполнена возможным количеством колонок, учитывая их длину в 100px. Когда в строке не остается места, то элементы переходят на следующую строку.

minmax

minxmax() функция в CSS, которую очень удобно использовать в связке с auto-fill . Она позволяет вам указывать минимальное и максимальное значение одновременно. Если нам надо, чтобы колонки были минимум в 100px и максимум в 1fr (Оставшееся доступное место. Подробнее про неё можете прочитать тут. Что такое единица гибкости fr в CSS, доступным и простым языком), то колонки автоматически получат размер, чтобы заполнить строку:

Сейчас браузер уместит в строку столько колонок с минимальной шириной в 100px, сколько он сможет. А если останется ещё место, то оно будет поровну распределено между всеми автозаполненными колонками.

auto-fit

А давайте поменяем auto-fill и auto-fit местами, в первом примере с auto-fill :

Не такая уж и большая разница в сравнении с auto-fill . Но явное различие появится тогда, когда вы укажете браузеру, что делать с оставшимся местом в строке.

minmax

Итак, давайте снова добавим minmax() :

auto-fit будет вести себя почти как auto-fill , но если есть только одна строка и есть место для дополнительных колонок, но нет элементов, которые можно вставить эти колонки, то тогда он сделает ширину пустых колонок равную нулю. А если выставить максимальную ширину колонок на 1fr, то браузер разделит оставшееся место поровну между ними.

Что такое единица гибкости fr в CSS, доступным и простым языком

Stas Bagretsov

Первым делом я хочу определиться с терминологией в этой статье и последующих. Самый верный перевод fractional unit в контексте Grid разработки и применения fr в ней же, это единица гибкости. Почему? Это вы поймете прочитав статью.

Сама по себе fr это новая форма единицы измерения, в основном ассоциируемая с CSS Grid.

Время чумовых историй

Давайте на чуток притворимся, что мы забыли про CSS Grid единицы гибкости. Ок? Отлично.

И т а к, представьте что у нас выходные и у нас есть большой, сочный и пористый торт.

Но затруднение в том, что вам надо разделить его на пять одинаковых кусков! И так, вы берете нож и приступаете к работе. Через пять минут у вас получается самая идеальная нарезка. Пять равных частей!

Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога. Реально? Что тогда делать? Собрать все разделенные пироги и волшебным образом связать их снова вместе, чтобы сделать снова равную нарезку?

Я бы не стал этого делать.

Применение

Это проблема с которой мы жили долгое время. Как и большой пористый пирог, у нас есть 100% ширина вдоль любого размера экрана.

Обратите внимание на разметку ниже:

У нас есть контейнер <section> который хранит в себе 5 <div>

Чтобы разделить 100% ширину равномерно и раздать каждому <div> равную ширину, вам нужно указать для каждого индивидуальную ширину в 20%. Почему?

Потому что у нас пять <div> . 100% разделить на 5 получается 20%.

Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога.

Если добавится еще один <div> , то вам придется пересчитывать всё и указывать заново ширину! 100% разделить на 6, ну дальше сами считайте.

И именно это та проблема, которую решает fr — единица гибкости.

Единица гибкости

С единицей гибкости (fr) вам не нужно что-то больше пересчитывать — вообще не нужно. На то она и единица гибкости, чтобы быть гибкой.

Если вы указываете ширину в 1fr , то вы можете дальше добавлять столько элементов, сколько возможно и это она об этом позаботиться. Ширина каждого элемента будет равномерно разделена среди дочерних элементов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *