От автора: это не самая востребованная функция, но контейнерные запросы дают возможность создавать в CSS макеты «Masonry», которые долгое время были большой проблемой для разработчиков CSS. Masonry — это такая схема, в которой элементы неравномерного размера расположены рваными рядами. Типа обычной кирпичной стены.
Сам по себе макет достижим на чистом CSS, но с одной большой оговоркой: элементы расположены не по строкам, а по столбцам, что часто является преградой.
/* Людям обычно не нужно это */ 1 4 6 8 2 7 3 5 9 /* Им нужно это */ 1 2 3 4 5 6 7 8 9
Если вам нужна эта рваная строка и горизонтальный исходный порядок, вы заходите на территорию JavaScript. Так было до сих пор, пока Firefox не реализовал с флагом функцию в Firefox Nightly, как часть CSS grid.
Матс Палмгрен: Реализация этого предложения теперь доступна в Firefox Nightly. По умолчанию оно отключено, поэтому вам нужно загрузить about:config и установить предпочтение, layout.css.grid-template-masonry-value.enabled, чтобы включить true (введите «masonry» в поле поиска на этой странице, и вам будет показано это предпочтение).
Джен Симмонс уже создала несколько демонстраций:
Это действительно сетка?
Небольшое пояснение от Рейчел Эндрю…
Сетка — это не Masonry, потому что сетка имеет строгие ряды и колонки. Если вы посмотрите на макет Masonry, в нем нет строгих рядов и колонок. Обычно мы определяем ряды, но колонки действуют больше как flex -макет или Multicol. Основное различие между макетом, который вы получаете с помощью Multicol, и макетом Masonry, заключается в том, что в Multicol элементы отображаются по столбцам. Как правило, в макете Masonry вы хотите, чтобы они отображались построчно.
Лично я не большая поклонница того, чтобы это стало частью спецификации Grid. На первый взгляд это, безусловно, неизбежно, но я чувствую, что это относительно специализированный режим верстки, который на самом деле не является сеткой. Это больше похоже на flex -макет, чем на сетку.
Помещая этот метод компоновки в спецификацию Grid, я беспокоюсь о том, что затем мы связываем себя с необходимостью поддержки функционала Masonry с любыми другими дополнениями в Grid.
Ничто из этого еще не является окончательным, и на эту тему идет активное обсуждение рабочей группы CSS. Как сказала Джен:
Это экспериментальная реализация, обсуждаемая как возможная спецификация CSS. Это еще не официально, и, скорее всего, изменится. Не пишите в блоге о том, что это определенно так. Это не так. Пока нет. Это эксперимент. Прототип. Если у вас есть мысли, присоединяйтесь к CSSWG.
Houdini?
В последнее время велась дискуссия о нативной Masonry, она смешивалась с идеей, что CSS Layout API, как часть Houdini, может сделать это. Это то, что вы можете увидеть, открыв эту демонстрацию (репо) в Chrome Canary.
Я не совсем в курсе того, должен ли Houdini использоваться, чтобы подобные идеи могли быть созданы прототипом в браузере и, в конечном счете, перенесены из Houdini, или эти идеи должны просто остаться в Houdini, или что-то еще.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.