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

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

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

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

CSS

123456789/* Людям обычно не надо это */1  4  6  82     73  5     9 /* Им необходимо это */1  2  3  45  6     78     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. На 1-ый взор это, непременно, безизбежно, но я чувствую, что это относительно спец режим верстки, который по сути не является сетью. Это больше похоже на flex -макет, чем на сетку.

Помещая этот способ компоновки в спецификацию Grid, я беспокоюсь о том, что потом мы связываем себя с необходимостью поддержки функционала Masonry с хоть какими иными дополнениями в Grid.

Ничто из этого еще не является окончательным, и на данную тему идет активное обсуждение рабочей группы CSS. Как произнесла Джен:

READ
Учимся создавать макет Masonry-галереи, используя чистый CSS

Это экспериментальная реализация, обсуждаемая как вероятная спецификация CSS. Это еще не официально, и, быстрее всего, поменяется. Не пишите в блоге о том, что это точно так. Это не так. Пока нет. Это опыт. Макет. Если у вас есть мысли, присоединяйтесь к CSSWG.

Houdini?

В крайнее время велась дискуссия о нативной Masonry, она смешивалась с мыслью, что CSS Layout API, как часть Houdini, в состоянии сделать это. Это то, что вы сможете узреть, открыв эту демонстрацию (репо) в Chrome Canary.

Я не совершенно в курсе того, должен ли Houdini употребляться, чтоб подобные идеи были бы сделаны макетом в браузере и, в конечном счете, перенесены из Houdini, либо эти идеи должны просто остаться в Houdini, либо что-то еще.

Создатель: Chris Coyier

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий