Chapter 1: Redesigning a Site to Use CSS Grid Layout

by Ilya Bodrov

CSS Grid is a new hot trend in web development these days. Forget about table layouts and floats: a new way to design websites is already here! This technology introduces two-dimensional grids which define multiple areas of layout with a handful of CSS rules. Grid can make third-party frameworks such as 960gs or Bootstrap grid redundant, as you may easily do everything yourself! This feature is supported by all major browsers, though Internet Explorer implements an older version of the specification.

In this article we are going to see CSS Grid in action by creating a responsive multi-column website layout.

What We Are Going to Build

So, we were asked to create a typical website ...

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

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.