Skip to content

CSS masonry layout, only needs JS to re-order an array, no DOM manipulation

Notifications You must be signed in to change notification settings

jessekorzan/masonry-css-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

problem image

CSS column-count for masonry-style layouts is dead easy (couple lines of CSS and very minimal markup to get it going).

The Problem

The problem (sometimes) is the way the content flows (see the diagram above). Typically, I want a left-to-right scan reading experience, i.e. cards of blog post summaries with the most recent posts to appear at the top of the view. I also don't want to use JS for the layout. Pure CSS... all the way.

The Solution

The only "help" that JS provides is re-ordering the array before rendering to the view so that we can use CSS column-count for the layout. Again, for example, this array could be a feed of recent news posts.

Check the demo: here

Check out the code: react component

Post on Medium: Easy CSS Masonry Layout w/ Left-To-Right Content Flow

Special thanks to my Klue teammate @nickb for figuring out the array re-order (and in a way even I could understand).


This project was bootstrapped with Create React App.

Here's the guide here.

About

CSS masonry layout, only needs JS to re-order an array, no DOM manipulation

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published