CSS GridIt’s a new way to create layouts, it’s the first proper layout system ever, and it’s browser-native, and it gives us a lot of benefits.
When you compare it to today’s most popular Bootstrap framework, the benefits of Grid become even clearer. Not only can you create layouts that would not have been possible before without the introduction of JavaScript, but your code will be easier to maintain and understand.
I’ll explain why in this article.
Labels will be more concise
Using a grid will make your HTML cleaner than Bootstrap, and while it’s not the most important benefit, it’s probably the first thing you’ll notice.
To illustrate, I created a layout so that we could compare the code needed for the two versions.
Note: I designed it a little bit in the example I gave, but it has nothing to do with comparing Bootstrap, so I’ll just keep the CSS for the layout
Bootstrap
Look at the firstBootstrapLabel to be created.
There are two things to note here:
- Each row needs one
<div>The label - Class name is used to specify the layout (
col-xs-2)
As this layout grows in complexity, so does HTML.
If this were a responsive site, it would look more complex:
Now let’s look at layout with Grid:
I could use semantic elements here, but I’ll use div to compare to Bootstrap.
Obviously, the Grid layout looks much simpler. Gone are the ugly class names and extra div tags per row, simply a Container and items inside.
Unlike Bootstrap, the complexity of Grid layout tags does not increase much as the layout complexity increases.
BootstrapThe examples don’t need to add any CSS, just reference them.CSS GridDefinitely need to be added. Specifically, it goes like this:
This may be one of the arguments some people make in favor of Bootstrap: you don’t need to care about CSS, just define the layout in HTML. But, as you’ll see, coupling between tags and layouts can become a big problem when it comes to flexibility.
A more flexible
Suppose you want to change the layout based on screen size. For example, pull the menu to the top row and view it on your mobile device.
In other words, the layout starts like this:
Replace it with this:
CSS Grid
With CSS Grid it’s very simple, we just add a media Query, and the layout magically becomes what you want.
You can rearrange the layout this way without worrying about the order in which the HTML tags are written, which is a huge benefit to both developers and designers!
BootStrap
If you want to do the same thing in Bootstrap, you’ll have to change the HTML and adjust the order of the tags.
It’s not enough to just use media Query for this requirement, you have to use JavaScript as well.
This example is one of the biggest benefits OF the Grid THAT I’ve seen
No longer limited to 12 columns
This is not a big problem, but it has bothered me many times, because the Grid system of Bootstrap is divided into 12 columns. If you want a 5-column layout, you will get tangled, or 7 columns, 9 columns, or anything that does not combine into 12 columns.
CSS grids have no limits, you can have exactly as many grids as you want. Here is a grid with seven columns:
This is done by setting grid-template-columns: repeat(7, 1fr), like this:
Browser support
Browser support must also be discussed; at the time of writing, 75% of the world’s web traffic supports CSS Grid
The CSS Grid is a layout module that allows us to change the layout of documents without interfering with the label order. In other words, the CSS grid is a purely visual tool that, when used properly, should have no impact on the presentation of the document’s content. So: The lack of CSS Grid support in older browsers doesn’t affect the visitor experience, it just makes it different.