How to Masonry Layout Made From Pure HTML and CSS
One popular content layout style is “masonry”. Masonry style layouts aren’t something new. CSS Grid Layout is supported natively. Opera Mini is an exception. In the Internet Explorer, the prefix ms is required. The same applies to Microsoft Edge in its current version 15. Both IE and Edge don’t fully support CSS Grid, even with the prefix.
Codepen user Kseso convinces with a simple but impressive application case for CSS Grid, by creating a clean Masonry layout from pure HTML and CSS.
The fact that the CSS Grid Layout is an important design function for modern websites has been a given ever since its near comprehensive availability in all modern browsers. As a perfect addition to Flexbox, CSS Grid provides the option to design entire pages, while Flexbox is restricted to individual element areas within the page.
Masonry Layout With CSS Grid is simple
The Masonry layout that Kseso presents in this Codepen is meant to be an inspiration, but it can also be used as it is. The necessary prefixes are missing. However, you can easily add them yourself; the code is not that long.
See example in Codpen