A CSS Grid Based Layout

Since the cool boys and girls are talking a lot about the new CSS Grid specification lately, it’s time to dig into this subject myself. For me, the best way by learning this, is: 1. choose a real world problem and 2. write about it in a post. The first is done and the second are you reading right now.

Please note, this is not a complete guide to CSS Grid. Others have already written about it. I've included references after this post. Please, also check the browser support of CSS Grid. At the moment of writing this post (July 2017), the global browser support is around 70%.

This post covers how to create a web layout with CSS Grid. I'll explain each step and include all HTML and CSS code needed.

Grid layout

I started with a sketch (left). It shows the layout I want to build using the Grid Layout. At the right you see a screenshot of the final result (desktop view).