Member-only story
How to Build an Article Layout With CSS Grid
Reproducing “The Verge” blog posts layout
CSS Grid is a display property in CSS useful to create layouts. Many developers have not used it because of a lack of browser support and the obligation to support Internet Explorer. Thankfully, the need to support Internet Explorer is going away. This article will show you one way to use CSS Grid to create the layout of blog posts.
The Verge is an information website. Articles are often presented with a visual separator that breaks the flow of the blog post. It makes the text more readable, breathable. Images separate blocks of texts, but sometimes quotes separate them.
Images are either full width, medium-size width, or of the same width as the text. Images and quotes are aligned with the text when you are using a mobile. CSS Grid, with its ability to create a layout with columns, is perfect for this use-case.
I’d like to add a quick note before we jump into it. The code was written two years ago when I was using Pug and Stylus regularly. Pug is a templating language that compiles to HTML. Stylus is a CSS preprocessor. The code should still be understandable even if you never used Pug and Stylus.
