CSS Grid Layout: Masonry Layout Made From Pure HTML and CSS

Codepen user Kseso convinces us with a simple but impressive application case for CSS Grid, by creating a clean Masonry layout from pure HTML and CSS.

CSS Grid Layout is Available Across the Board

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. By now, 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. This flaw will be fixed starting from version 16 of the current Redmond browser. If you can afford to only develop projects for current browsers, you can go all out here. Kseso is a very active border crosser that likes to experiment in the cutting edge area. He likes to add the hashtag #impoCSSible, documenting that he doesn't present an established default solution.

Simple But Universal Masonry Layout With CSS Grid

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. Kseso also didn't put much effort into optimizing the solution, but it should be sufficient for many application cases. Aside from the version of pure HTML and CSS, Kseso offers another version, where he integrated a JavaScript for lazy loading, which is the need-based loading of images. For large image galleries, this solution should be more practicable.

Kseso Has a Lot More to Offer

It's worth following Kseso on Twitter. He also runs a blog, but it's only available in Spanish. The Google Translator can somewhat help with that, but it doesn't handle Kseso's way of enunciating too well. The blog layout is interesting. It takes a lot of inspiration from Tweetdeck and HootSuite, and will seem familiar to social media fans right away. Kseso had already been publishing on CSS Grid layout in 2015. He was far ahead of his time back then. I'll forgo integrating source code here, as you can easily grab everything from the Codepen, and potentially even experiment with the parameters. Let's go.