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 choose to create a 7 columns grid layout for desktop, tablet, and mobile. The layout has a fixed width on the desktop version, and the edges are set as auto. The edges act in the same way as margin: auto; . You might have noticed on tablet and mobile; I have two columns set to 0. The reason why is that I can reason about the layout more easily when placing the element on desktop, tablet on mobile. Setting the column to 0 allows me to have the same number of columns on every screen size.
/ how-to-build-an-article-layout-with-css-grid
https://github.com/Ffloriel/TheVerge
Chapters:
0:00 Introduction
0:23 What is CSS Grid?
1:15 The Verge Article Layout
2:32 Let's look at the code
5:50 Three CSS Grid Resources
You can follow me on Medium and GitHub:
/ floriel
https://github.com/Ffloriel