Chapter 3: Easy and Responsive Modern CSS Grid Layout

by Ahmed Bouchefra

In a previous article we explored four different techniques for easily building responsive grid layouts. This article was written back in 2014 before CSS Grid was available so in this tutorial, we'll be using a similar HTML structure but with modern CSS Grid layout.

Throughout this tutorial, we'll create a demo with a basic layout using floats and then enhance it with CSS Grid. We'll demonstrate many useful utilities such as centering elements, spanning items, and easily changing the layout on small devices by redefining grid areas and using media queries.

Live Code

You can find the code in this CodePen.

Before, we dive into creating our responsive grid demo, let's ...

Get CSS Grid Layout: 5 Practical Projects now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.