Первые шаги возможной реализации CSS-макета Masonry

Первые шаги возможной реализации CSS-макета Masonry

От автора: это не самая востребованная функция, но контейнерные запросы дают возможность создавать в CSS макеты «Masonry», которые долгое время были большой проблемой для разработчиков CSS. Masonry — это такая схема, в которой элементы неравномерного размера расположены рваными рядами. Типа обычной кирпичной стены.

Сам по себе макет достижим на чистом CSS, но с одной большой оговоркой: элементы расположены не по строкам, а по столбцам, что часто является преградой.

Если вам нужна эта рваная строка и горизонтальный исходный порядок, вы заходите на территорию JavaScript. Так было до сих пор, пока Firefox не реализовал с флагом функцию в Firefox Nightly, как часть CSS grid.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Матс Палмгрен: Реализация этого предложения теперь доступна в 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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