Understanding the CSS Grid Layout Module

The web was never meant to be laid out by table elements, nor were floats ever really designed for that purpose. Even flexbox, the new kid on the block, isn’t meant for designing multidimensional layouts. The CSS Grid Layout Module, however, has arrived for exactly that purpose.

It’s still in its infancy, but it’s gaining traction in modern browsers, so now is the time to get behind the CSS Grid Layout Module, learn how it works, and help the web development community make it better. This is how we’ll be laying out web pages with CSS in the future.

Learn CSS: The Complete Guide

We’ve built a complete guide to help you learn CSS, whether you’re just getting started with the basics or you want to explore more advanced CSS.

Posts in this series

CSS Grid Layout: A Quick Start Guide
How we approach layout on the web is changing, and at the forefront of that change is CSS Grid Layout. This updated quick start guide will skip the details...
Ian Yates
15 Mar 2018
Web Design
CSS Grid Layout: Fluid Columns and Better Gutters
In this tutorial we’re going to take the grid from our previous tutorial and use it as a playground to look further into Grid. We’ll improve the way we...
Ian Yates
22 Sep 2016
Web Design
CSS Grid Layout: Using Grid Areas
One thing we’ve mentioned, but have yet to cover properly in this series is grid areas. So far our grid items have each been contained within a single grid...
Ian Yates
28 Sep 2016
Web Design
CSS Grid Layout: Going Responsive With auto-fill and minmax()
Throughout this series we’ve become familiar with Grid syntax, learned about some efficient ways of laying out elements on a page, and said goodbye to some...
Ian Yates
3 Oct 2016
Web Design
Understanding the CSS Grid “Auto-Placement Algorithm”
In this tutorial we’ll look at CSS Grid’s auto-placement algorithm, and how we can manipulate it to change the way it positions our grid items.
Ian Yates
1 Nov 2016
Web Design
Quick Tip: Name Your CSS Grid Lines, Just in Case
In any CSS Grid each line has an index number which we can reference to place grid items. However, we can also name each of these grid lines, making it...
Ian Yates
9 Dec 2016
Web Design
How to Use Implicit Track Sizing on Your CSS Grid
In this tutorial we’ll look at “implicit” sizing in CSS grid; values which figure themselves out, without us “explicitly” defining them.
Ian Yates
29 Jun 2018
Web Design
The Quirks of CSS Grid and Absolute Positioning
It’s quite possible to use CSS positioning on grid items, just as you would with most other elements. There are one or two quirks, however, so let’s take a...
Ian Yates
3 Jul 2018
Web Design
Save Time With the CSS “grid” Shorthand Property
In this tutorial we’re going to look at the shorthand property “grid” which quickly deals with all kinds of grid properties in a single statement.
Ian Yates
6 Aug 2018
Web Design