Why you should be using CSS Grid
And a few reasons why you may want to ditch Bootstrap
CSS Grid has been out for a hot second and has recently gained support with Chrome, Firefox, and Safari. Here are some of the reasons CSS Grid has grabbed my attention, and why I think it could be a great replacement for Bootstrap:
Simple Markup
One of the best features of the CSS Grid is simplicity, it makes your markup cleaner and sexier.
I’ve created a test so that we can compare the markup and styling needed for the two versions:
Bootstrap
From the images above, it is important that you notice a few things:
- There is a div tag assigned to each row
- You have to use class names to specify a layout for all screens sizes you are optimizing for
- The more complex the layout gets, the more complex the markup
CSS Grid
Now let’s see what the markup would look like if we’re using CSS Grid:
Sexier and much simpler isn’t it? No more messy class names and extra div tags needed for each row. It’s just a container for the grid and items inside it.
The version created in Bootstrap does not require any further CSS and in order to get our CSS Grid version to look like the Boostrap version, we will need to add some CSS.
That may be a reason for some to favor Bootstrap over CSS Grid: instead of worrying about the CSS, you define the layout in the markup.
Enhanced Flexibility
Let’s say you want to add some changes to your layout based on screen size, for instance, change the position of the menu to the top row whenever the website gets opened on a mobile screen.
From:
Into this:
CSS Grid
This is a pretty easy task for CSS Grid, all that is needed is the addition of a media query, you can add items as you please, and poof… magic!
Source Order Independence is all about being able to rearrange your layout like this and not have to worry about how you write your markup. It’s made the life of designers and developers much simpler and everything I’ve read seems to show that they can’t get enough.
Bootstrap
Assuming we want to repeat the same thing in Bootstrap, it is important that we alter the markup. For example, we would need to change the position of the menu tag from the second row to the top row. Getting this done with a media query is not possible without a bit of Javascript, CSS, and HTML.
Gone are all the 12 Column Limitations
While this may not really be a big deal, try doing this a few times and it’s bound to become annoying. Also, as Bootstrap is based off a 12 column grid, you may run into issues when trying to work on a design that is not based on 12 columns. With CSS Grid, you have the ability to edit and use as many columns as you need!
To edit the number of columns, simply add this line to your CSS: grid-template-columns to repeat(7, 1fr)
Before you drop everything and try to get your management team to start training up on CSS Grid, do some research and some side project experiments. You may find that a few hours spent trying to wrap your head around it may actually save you a bunch of frustration in your next project.
