Per
CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the browser, which gives us a ton of benefits.
These benefits become especially clear if you compare CSS Grid to the most popular framework of them all: Bootstrap (which we’ve created a free course on here btw). Not only can you create layouts that previously wasn’t possible without introducing JavaScript, but your code will be easier to maintain and understand.
In this article, I’m going to explain why.
Note: I’ve also created a free CSS Grid course. Click here to get full access to it.
Click the image to get to the course
Now let’s look at my top three reasons for why I think CSS Grid beats Bootstrap.
Your markup will be simpler
Swapping out Bootstrap with CSS Grid will make your HTML cleaner. While this isn’t the most important benefit, it’s likely the first one you’ll notice.
To exemplify this, I’ve created a dummy layout for a website, so that we can compare the code needed for the two versions. Here it is:
Note: I’ve given the example a little bit of design. However, this has nothing to do with the comparison between CSS Grid and Bootstrap, so I’m going to keep that part of the CSS outside of my code examples.
Bootstrap
Let’s first look at the markup needed to create this website in Bootstrap.
There are two things I want you to notice here:
- Each row has to be in its own
<div>tag. - You have to use class names to specify the layout (
col-xs-2). - As this layout grows in complexity, so does the HTML.
If this was a responsive website the tags would normally look even worse:
CSS Grid
Now let’s look at the CSS Grid way of doing it. Here’s the HTML:
I could have used semantic elements here, but I’m choosing to stick with div’s to make the comparison to the Bootstrap example easier.
We can instantly see that this markup is simpler. Gone are the ugly class names and the extra div tags needed for each row. It’s just a container for the grid, and items inside it.
And unlike with Bootstrap, this markup won’t grow much in complexity as the layout grows in complexity.
However, while the Bootstrap example doesn’t require you to add any CSS, the CSS Grid example, of course, requires that. Specifically, you’ll have to add this:
And that might be an argument in favour of Bootstrap for some people: you don’t have to worry about CSS in order to create a simple grid, as you simply define the layout in the HTML.
But as you’ll understand in the next point, this coupling between markup and layout is actually a weakness when it comes to flexibility.
Much more flexibility
Let’s say you want to change your layout according to the screen size. For example, pull the menu up to the top row when it’s being viewed on mobile.
In other words, change the layout from this:
Into this:
CSS Grid
Doing this with CSS Grid is super simple. We’ll just add a media query, and shuffle around the items however we want:
The fact that you can rearrange the layout like this, without worrying about how the HTML is written is called source order independence, and it’s a huge win for developers and designers.
CSS Grid allows you to make HTML into what it was supposed to be. Markup of content. Not visuals, which belong in the CSS.
Bootstrap
If we wanted to do the same thing in Bootstrap, we’d actually have to change the HTML. We’d have to move the menu tag up to the top row, besides the header, as the menu is trapped in the second row.
Doing this based on a media query is not trivial. It can’t be done using HTML and CSS only, so you’d have to start fiddling around with JavaScript.
This example illustrates the biggest benefit I’ve experienced with CSS Grid so far.
No more 12 column limitation
This isn’t a huge problem, but it has annoyed me several times. As the Bootstrap grid is split into twelve columns, you’ll go into trouble if you want a five column layout. Or seven. Or nine. Or anything that doesn’t add up to twelve.
With CSS Grid, this isn’t the case. You can make your grid have exactly the amount of columns you want. Here’s a seven column grid.
This is done by setting grid-template-columns to repeat(7, 1fr), like this:
Now there might be a way to hack your way around Bootstrap and make this work as well.
And I’m aware that Bootstrap 4 uses Flexbox, which makes this possible as well. But CSS Grid certainly makes it easy to do these kinds of things.
Browser support
Before we end we, of course, have to talk about browser support as well. At the time of writing this article, 92% of global website traffic supports CSS Grid.
However, before you completely abolish the thought of using CSS Grid, I’d listen to what Morten Rand-Henriksen says about that subject, which argues that CSS Grid is an opportunity to reframe the way we think about backwards compatibility:
CSS grid is a layout module; it allows us to change the layout of a document without interfering with its source order. In other words, CSS grid is a purely visual tool and used correctly, it should have no effect on the communication of the contents of the document. From this follows a simple but surprising truth: The lack of support for CSS grid in an old browser should not affect the experience of the visitor, but rather just make the experience different.
In other words, since you’ve separated the content from the visuals, the result is that all visitors will be presented with the content, however, CSS Grid will enhance the experience for those who’ve got support for it, through a better layout.
Final remarks
Finally, I want to share a quote from Jen Simmons, developer advocate at Mozilla. She describes the same sentiment I’ve gotten towards CSS Grid after getting to know it:
The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser. — Jen Simmons
If you’re convinced CSS Grid is the future, and you want to learn more, check out my free course on the subject here.
Thanks for reading! My name is Per, I’m the co-founder of Scrimba, a new tool for creating interactive coding screencasts. If you have any questions or comments, feel free to reach out to me via Twitter.
