A brief discussion on why css grid is more suitable for creating layout than Bootstrap

Why is CSS Grid more suitable for layout than Bootstrap? This article will introduce to you the reasons. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

CSS Grid is a completely new way of creating layouts. This is the first proper layout system in history, and it is native to the browser. Yes, he has brought us a lot of benefits.

When you compare it with today's most popular Bootstrap framework, the benefits of grid become particularly clear. Not only can you create layouts that were previously unachievable without the introduction of JavaScript, And your code will be easier to maintain and understand.

[Related recommendations: "css video tutorial" "bootstrap tutorial》】

In this article I will explain why.

Tags will be more concise

Compared with Bootstrap, using grid will make your HTML cleaner, although this is not the most important benefit. But it might be the first thing you notice.

To illustrate, I created a layout so that we can compare the code required for both versions.

Note: I slightly styled the example given, but it has nothing to do with our comparison Bootstrap, so I Only keep the CSS of the layout part

Bootstrap

First look at the tags that Bootstrap needs to be created.

There are two things to note here:

• Each row requires a <div>tag<li>Used class name to specify layout (<code>col-xs-2)

As the complexity of this layout grows, so does HTML in this way.

If this was a responsive website, it would look more complicated:




Now let’s look at using Grid layout:



I could use semantic elements here, but I still use divs to contrast with Bootstrap.

Obviously, the grid layout looks simpler. Gone are the ugly class names and the extra div tags required for each row. It’s just a container and the items inside.

Different from Bootstrap, as the layout complexity increases, the complexity of the Grid layout tag will not increase much.

BootstrapThe example does not need to add any CSS, just quote it. CSS Grid definitely needs to be added. Specifically, it goes like this:




This may be an argument some people make in favor of Bootstrap: You don’t have to care about CSS; Define the layout in HTML. But, as you'll understand, coupling between label and layout can become a big problem when it comes to flexibility.

More Flexible

Suppose you want to change the layout based on the screen size. For example, pull the menu to the top row to view it on mobile devices.

In other words, the layout changes from this:



to this:



CSS Grid

It will be very simple to use CSS Grid, we only need to add a media query, and the layout becomes you like magic want.



You can rearrange the layout like this without worrying about the order in which HTML tags are written. This is a great benefit for developers and designers!

BootStrap

If you want to do the same thing in Bootstrap, you have to modify the HTML and need to adjust it The order of the tags.



For this requirement, just using media query is not enough, you also have to use JavaScript.

This example is the biggest benefit of grid that I have experienced

No longer limited to 12 columns

This is not one A big problem, but this problem has troubled me many times, because the grid system of Bootstrap is divided into 12 columns. If you want a 5-column layout, you will be confused, or 7 columns, 9 columns Columns, anything that won’t be combined into 12 columns.

CSS GridThere are no restrictions, you can make the grid exactly the number you want. This is a 7-column grid:



Achieved by setting grid-template-columns: repeat(7, 1fr), like this:



Browser Support

Of course browser support must also be discussed, at the time of writing this article, 75% of global website traffic SupportCSS Grid



CSS Grid is a layout module that allows us to change the layout of the document without disturbing the tag order. In other words, the CSS grid is a purely visual tool that, when used properly, should have no impact on the expression of document content. So: the lack of support for CSS Grid in older browsers does not affect the visitor experience, it just makes the experience different.

Original address: https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163

For more programming-related knowledge, please visit:programming video! !