От автора: помимо явно заданных размеров колонок в CSS Grid есть еще одна из мощных и удобных функций – это возможность автоматически повторять в CSS колонки и делать автоподстановку элементов в них. Если точнее, то мы можем указать количество колонок в сетке, а браузер будет их адаптивно подстраивать под нас: на маленьких вьюпортах колонок будет меньше, на больших – больше. И не нужно писать медиа запросы и строго прописывать адаптивное поведение.
Все это доступно в всего лишь одной строке CSS – мне это напоминает, как Дамблдор взмахнул своей палочкой дома у Горация и «мебель вернулась на свои места, украшения взмахнули в воздух, подушки набились перьями, рваные книги сами себя отреставрировали и приземлились на полки…».
Такое магическое поведение без подключения адаптивности достигается через функцию repeat() и ключевые слова автоподстановки.
В общем, функция repeat() позволяет повторять колонки сколько угодно раз. Например, если вам нужна 12-ти колоночная сетка, можно написать так:
|
1 2 3 4 5 6 |
.grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); } |
1fr – эта запись говорит браузеру растянуть пространство между колонок равномерно. То есть мы получаем жидкие и равные по ширине колонки. В таком случае сетка всегда будет растягиваться на 12 колонок, несмотря на ширину. Как вы догадались, это нехорошо. На маленьких экранах контент может сильно сжаться.
Поэтому необходимо задать минимальную ширину колонок, чтобы они не стали очень узкими. Для этого нам понадобится функция minmax().
|
1 |
grid-template-columns: repeat( 12, minmax(250px, 1fr) ); |
Но тогда в CSS Grid переполнится строка. Колонки не переедут на новые строки, если ширина вьюпорта недостаточна, чтобы вместить все колонки с новой минимальной шириной. Мы же сказали браузеру повторять колонки 12 раз в строке.
Чтобы колонки переносились можно использовать auto-fit или auto-fill.
|
1 |
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); |
Эти ключевые слова говорят браузеру перенести элемент на новую строку, если не хватает ширины, чтобы его вместить без перекрытия. Используемые нами единицы измерения также гарантируют, что в случае, если ширина допускает догрузку столбца, но не полный столбец, то это пространство будет распределено по столбцу или столбцам, которые уже вместились, чтобы на конце строки не оставалось пустого пространства. Исходя из названий, сначала может показаться, что auto-fill и auto-fit противоположны. Но по факту разница в них незначительна.
С auto-fit вы можете получит в конце строки пустое пространство. Но когда и как? Давайте узнаем.
Fill или fit? В чем разница?
На недавнем семинаре по CSS я говорил про разницу auto-fill и auto-fit:
«auto-fill ЗАПОЛНЯЕТ строку максимально возможным числом колонок. Если в строку можно вместить новую колонку, она будет создана с четко заданной шириной, потому что это ключевое слово пытается ЗАПОЛНИТЬ строку максимальным числом колонок. Новые колонки могут быть пустыми, но они все же будут занимать место в строке.
auto-fit ПОДСТРАИВАЕТ доступные на данный момент колонки под пространство, расширяя их, чтобы они могли занять все доступное пространство. Браузер сначала заполняет свободное пространство дополнительными колонками (как auto-fill), после чего пустые колонки сжимаются.»
Сначала может показаться странным, но если разобрать наглядный пример, все станет понятно. Это мы и сделаем с помощью Firefox DevTools Grid Inspector. Этот инструмент поможет нам визуализировать размер и положение элементов сетки и колонок.
Разберем демо ниже.
Колонки заданы через функцию repeat() и имеют минимальную ширину 100px, максимальная ширина 1fr. Колонки будут равномерно расширяться на любое свободное пространство. Для колонок в строке мы будем использовать ключевые слова автоподстановки, и браузер сам позаботиться об адаптивности сетки и переносе колонок на новые строки при необходимости.
Браузер разместит колонки и задаст им размер в первом примере с помощью auto-fill, после чего будет применен auto-fit.
|
1 2 3 4 5 6 7 |
.grid-container--fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .grid-container--fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } |
До определенного момента auto-fill и auto-fit ведут себя одинаково.
Но внутри они работают по-разному. Они дают один результат на определенной ширине вьюпорта.
Момент, когда эти ключевые слова начинают вести себя по-разному, зависит от количества и размера колонок, заданных в grid-template-columns. Поэтому в разных примерах эта точка будет разной.
Разница становится очевидна, когда вьюпорт становится настолько широк, что вмещает одну или более дополнительных колонок в строку. В этот момент браузер может пойти по двум путям, и все зависит от того, будет ли контент в этих колонках или нет.
Когда строка может вместить новую колонку, браузер ведет себя:
«у меня появилось место на еще одну колонку. У меня есть контент, который может перейти в эту колонку? Да? ОК, хорошо. Я добавлю в строку новую колонку, а на маленьких вьюпортах она будет перепрыгивать на новую строку.»
когда нет контента для новой колонки: «Могу ли я позволить новой колонке занять место в строке (тем самым повлиять на положение и размер остальных строк)? Или я могу схлопнуть эту колонку и использовать ее пространство для расширения существующих?»
auto-fill и auto-fit зают ответ на последний вопрос, а также определяют поведение браузера в этом сценарии. Сжимать или не сжимать, вот в чем вопрос. И это ответ.
Хотите вы ее сжать или нет зависит от контента и того, как вы хотите, чтобы контент вел себя в адаптивном дизайне.
Давайте посмотрим, как все работает. Чтобы проиллюстрировать различия auto-fill и auto-fit, разберем следующее видео. Я увеличиваю вьюпорт, чтобы в строке стало достаточно места для одной или более колонок. Строки идентичны, у них тот же контент и количество колонок. Разница в том, что первая строка использует auto-fill, а вторая — auto-fit.
Видите? Если пока что не поняли, видео ниже должно объяснить:
auto-fill: максимально заполняет строку! Добавляет максимально возможное число колонок. Неважно что они пустые – они должны быть. Если есть место под новую колонку, добавь ее. Неважно, пустая она или нет, она занимает место в строки, как будто она полностью забита (заполнена контентом/grid элементами).
auto-fill заполняет строку максимально возможным числом колонок, даже если они пустые, а auto-fit ведет себя немного по-другому.
auto-fit тоже заполняет строку новыми колонками при увеличении ширины вьюпорта, но новые колонки сжаты (и их разделители). Это можно посмотреть в Grid inspector. Посмотрите на количество строк в сетке, их становится больше при увеличении ширины.
auto-fit: текущие колонки должны заполнить все доступное пространство. Расширяем их, пока они не растянутся на всю строку. Пустые колонки не должны занимать места. Свободное пространство используется на заполненных колонках.
Важно помнить, что колонки добавляются в обоих случаях (сжаты они или нет), и их размеры явно не указаны – это особо подчеркнуто в спецификации. В нашем случае мы добавляем/создаем колонки в сетку с точными размерами точно так же, как в сетку из 12 колонок, например. Поэтому номер -1 означает конец сетки, что не подходит, если колонки создаются без размеров. Спасибо Rachel Andrew за этот совет.
Заключение
Разница межу auto-fill и auto-fit становится заметна только, когда строка может вместить дополнительные колонки.
Если вы используете auto-fit, контент будет растягиваться, чтобы заполнить ширину строки. А с auto-fill браузер позволяет пустым колонкам занимать пространство в строке, как будто они не пустые – они будут занимать пространство, даже если в них нет элементов сетки, т.е. они будут влиять на размер/ширину колонок.
Какое поведение выбрать, решайте сами. Мне до сих пор кажется, что auto-fill не лучше чем auto-fit. А как вы их использовали? Если использовали, пишите об этом в комментариях.
Автор: Sara Soueidan
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (2)