Introduction

Back in the early days of web UI, developers had to resort to all kinds of tricks and hackery to position things on the screen in a way that produced consistent results across multiple browsers. Today, nearly all web devices have support for the latest CSS features such as Grid Layout, which was introduced in 2017 by the W3C. In this article we’ll take a look at this useful CSS concept and explore some of the possible ways to build layouts with it.

CSS Grid Layout is different from Flexbox because it works across two dimensions instead of one. While Flexbox is good for a single row or column of items, Grid Layout can be used to align any number of items across any number of rows and columns imaginable. The possibilities are endless.

Grid Layout simplifies the infamously frustrating task of aligning things on the screen with CSS, something many developers are all too familiar with.

For a copy of the example project used in this article, see this GitHub repo.