#masonry

Masonry Layout Demo 1
▻https://codepen.io/jensimmons/full/QWjqbJj

POC par Mozilla d’une implémentation « 0 javascript / 100% CSS » pour l’organisation de blocs HTML de type « Masonry »
Le rendu attendu

https://pic.infini.fr/8UPBT8jr/YfuMQs1E.jpg

The CSS Working Group is currently pursuing a way to do this in 100% CSS. Mozilla is proposing one way to do this — and has implemented the idea, so that people can try it out and see what they think. This works in April/May 2020.
You can try it in Firefox Nightly. Type about:config in the URL bar. Then search for “masonry”. And set layout.css.grid-template-masonry-value.enabled to true.
This is an experimental implementation — being discussed as a possible CSS specification. It is NOT yet official, and likely will change.

Voir aussi une solution « pur CSS » OK avec les navigateurs actuels : ►https://tobiasahlin.com/blog/masonry-with-css

#masonry #0_javascript #css #firefox #poc

CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
►https://tobiasahlin.com/blog/masonry-with-css

Méthode « tout CSS » pour faire un layout masonry : à base de flexbox, :nth-child() et order
difficulté possible : semble nécessiter de fixer la hauteur de l’ensemble...

Voir aussi : 10 exemples de layout « types » en flebox : ▻https://tobiasahlin.com/blog/common-flexbox-patterns

#css #masonry #layout

Front-End Tricks: 100% #css control of #masonry Layout w/ left-right content flow
▻https://hackernoon.com/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190

https://cdn-images-1.medium.com/max/1024/1*9jRvf6g6tMKS7jn84JmuOA.png

CSS column-count + array reordering = left-to-right content flowLive Demo: ▻https://github.com/jessekorzan/masonry-css-jsThe problem… column-count works great except for left-to-right scan readingMasonry Layouts… popularized by sites like Pinterest. Loved by non-coding designers and holy-grailed in corporate boardrooms.Naturally, many sharp front-enders have worked on solutions. We have several libraries, techniques and hacks to achieve this marvel of content display.There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.For me, especially in exploratory efforts, a pure-CSS method is a flexible and fast way to iterate. I don’t want to rely on DOM manipulation or end up with a contrived (...)

#react #javascript #grid-layout