ES6 Flex Masonry Grid Demo
The grid can be applied to a parent of flex items. It can be used with popular CSS frameworks like Bootstrap.
All flex items must have the same with.
Direct children of the grid container may not have horizonal margins. Use padding instead or nest elements.
Card title
Edit text: Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Card title
Edit text: Lorem ipsum dolor sit amet.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Card title
Edit text: Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Card title
Edit text: Lorem ipsum dolor sit amet.
Card title
Edit text: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.