Revolutionising CSS with Grids
(Source: The header of Mozilla's Firefox grid inspector landing page. Mozilla neither endorse this blog post nor probably know that it exists :P)
You may or may not have heard about it by now, but browsers now have support for a new feature of CSS - the Grid. I'd argue that it's the single greatest addition to CSS since it was created, and to that end I wanted to post about it here.
First though, let's look at where we've been, as it will help us understand what's so great about the new grid specification.
In the days of CSS 2, the venerable HTML
<table> was the de-facto method for laying out your website - though some websites would use a frameset instead. This worked, but it wasn't very flexible. It also sort of 'abused' the HTML
<table> - as a
<table> is meant to display data, not provide a tool for layout purposes.
Curiously, I found some educational courses called this an 'advanced' technique for building a website - I certainly wouldn't want a website laid out in a table!
To solve this, we got the
float property. With this, we could get things to sit side by side - without having to use a table! This was much better than before, but still not very flexible.
Next up came the flexbox - This is like a sort of 1-dimensional grid - allowing you to set out your content in multiple nested rows or columns. It's certainly worth taking the time to learn, as it's very useful for things like spacing the items in a navigation bar out evenly, for example.
This brings us to the Grid. Basically, it's a 2-dimensional flexbox, but with some added extra features. It's probably best explained with an example image:
The above is a pair of screenshots of a little project of mine (hint: it's related to this) with Firefox's Grid Inspector turned on. As you can see on the left, I can split the page up into multiple discrete parts, and assign different elements to each one. This is known as an explicit grid.
On the right, however, I have simply told it that I want 2 columns, each row must be at least
10em high, and that there should be a
1em gap between cells - and it has worked out that it needs 2 rows in order for every element to have a place. This is known as an implicit grid.
Together, they form a powerful framework for laying out a page. Gone are the days of having a million container elements all over the place confusing things - it is now possible to lay out a webpage with a beautifully flat HTML structure.
If you're interested in creating a website for your next project, I encourage you to investigate the CSS Grid to layout your page. With browser support like this:
(Can I Use Embed from caniuse.bitsofco.de)
...there's really no reason not to use it! To get started, I'd recommend checking out CSS Tricks' A Complete Guide to Grid. It contains everything you need to know. If you prefer a more example-driven approach, then Grid by Example also provide a fairly comprehensive view.
(Found this useful? Got a brilliant resource not listed here? Found something even better? Comment below!)
Sources and Further Reading
- A Complete Guide to FlexBox
- A Complete Guide to Grid
- Grid by Example - their Getting Started section contains a good selection of links to articles on all the different aspects
- Learn to use Firefox's Grid Inspector