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 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.
By the way: In this article including a video, Jen Simmons shows you what the new CSS Grid inspector from the Firefox Nightly build is capable of. You can definitely use it in this context.