What are the differences of CSS Grid Layout to other layout systems? - css

Question

What are the differences between CSS Grid Layout and existing layouting frameworks like Bootstrap or other layouts like CSS Flexbox or CSS Tables (not HTML tables, I know they are supposed to be used for table contents only)?
What's it's concept and what use cases does it cover?

Answer 1

CSS grid layout is not attempt to supersede HTML tables, flexbox and grids in Twitter Bootstrap. CSS grid is a new way of creating markup.
Purpose of creating grid layout is in declaring your layout in CSS only. If you have container with plain list of children you can add 2D layout only via CSS. Not need to wrap items in row containers and so on. But it's not a benefit of grid, sometimes you need your cells to be wrapped in rows in HTML.
Twitter bootstrap and tables have the same conception: you have some rows and their children declared in HTML. It's not a shortcoming, it's how it works. And before flexbox we used these ways more often than we should due to lack of other ways.
Long long time ago (before CSS) we used only tables in frontend. That doesn't mean that tables are bad. This was the only way. But the tables are good when you really need a table. You just shouldn't use them for everything.
Flexbox is all about 1D arrangement of element. Of course in some cases it will look like 2D. In some cases you will have to use some hacks because you really need a grid! But it's due to relatively low browser of grid, not due to correct application of flexbox. It's perfect for some layouts, for others which really need 2D (where you'd better use tables or grid) it may be hacky.
So just use a grid layout where your layout is elegantly expressed in grid terms. In other cases it won't be maintainable and elegant way.

Answer 2

CSS Grid
CSS Gird is actual a whole new way of creating website layout.
It will give you more flexibility than any other framework or layout
system. Its very easy to create a 2D layout using CSS grid.
Websites load faster since you will skip loading heavy framework files (ex Bootstrap).
CSS grid are basically used to design the overall website layout.
Please check browser support before you actually start using it.
CSS Grid vs CSS Flexbox
Flexboxes are not a solution for website layouts.
Unlike CSS Grid you should not use Flexboxes to design the base website layout.
Flexboxes are one dimensional, that means elements only flow in one direction i.e. vertical or horizontal.
Check this image, The entire layout can be designed using CSS Grid and only the yellow section area where I might want to show an profile picture and a name below that, to achieve that I can use Flexbox instead of CSS Grid.
Use Flexbox to solve only uni-directional layout issues in your website.
CSS Grid Vs Bootstrap
You don't have to load unnecessary styles when using CSS Grid, but if you go for Bootstrap for grids then you are loading stuff which your website might not need.
Get rid of ugly markup. In Bootstap you need to use additional elements
with class row and col to design your layout. I personally feel
they makes my HTML look very ugly.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Bootstrap is not flexible, in order to change the layout you have to change the Markup. CSS job is to look after the presentation of your document, but when you use Bootstrap you are changing your HTML to to achieve your layout. When you use CSS grid you can change layout of the website without touching HTML code.
Below is an example where without changing the HTML I need section 1 to be shown first followed by section 2 and section 3. Look how effortlessly CSS Grid did the job. Where as for Bootstrap I have to update the HTML code and swap section 1 and section 2.
.wrapper {
display: grid;
grid-template-columns: 1fr;
}
.section-2 {
grid-row-start: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<h1>Bootstrap</h1>
<div class="row">
<div class="col-sm-12">Section 1</div>
<div class="col-sm-12">Section 2</div>
<div class="col-sm-12">Section 3</div>
</div>
<h1>CSS Grid</h1>
<div class="wrapper">
<div class="section-1">Section 1</div>
<div class="section-2">Section 2</div>
<div class="section-3">Section 3</div>
</div>

Answer 3

CSS Grid Layout allows to create a two-dimensional grid to lay out items on it. It is used to generate responsive user interface designs.
The main difference to layout systems like Bootstrap and CSS Flexbox is that it is two-dimensional. In Bootstrap and Flexbox layouts are defined one-dimensionally. This means, in CSS Grid Layout the grid items are aligned horizontally and vertically to each other like in a table. The differences to CSS tables is that it is more flexible in regard of sizing and aligning elements within a grid and allows items to overlap each other.
While the 2D effect can also be achieved (to some extent) by the other systems, Bootstrap's grid system is based on a 12-column layout and both Bootstrap and Flexbox align elements in one direction wrapping to the next line when they don't fit into the size of their container.
Furthermore, CSS Grid Layout allows to place the containing elements in different "grid areas" independently from their position within the DOM.
In Grid Layout, only items placed within implicit grids wrap elements similar to Flexbox or Bootstrap based on the available viewport or container size. Elements placed in explicit grids do not get rearranged that way, but this can be achieved in combination with media queries.

Answer 4

Bootstrap is a huge framework but I assume you are only refering to its grid in this comparison.
To me, the shining part of css flexbox and css grid is that they bring the grid system in the web world a bit closer to the grid system in the desktop world - it is more responsive and dynamic. What flexbox/css grid enables is that items/columns/rows can be described to adjust their sizes not only based on the size of the container, but also in response to each other.
For example, flexbox allows you to specify some item to have a fixed size (100 px), some item to have a size relative to container (20%), some item to fit to content (auto), and all the other items to share the rest available space in the proportion you want. If window size changes, all the items auto adjusts. Moreover, if the auto-sized item changes, the others will also adjust to absorb the refreshed free space. This is very much how desktop app layout works.
CSS grid shares the same capability of flexbox, but it is a grid, meaning it operates on two dimentions. If you ever try to use multiple flexbox rows to simulate a grid, you will run into the issue where you cannot ask the first item on each row to have the same size without giving it some kind of less flexible width (either a percantage or px). CSS grid can size them as a column, hence set the width to the widest item no matter which row it resides.
Bootstrap v3 simply just doesn’t have this flexibility. Its responsiveness only means responsive to container and devices, it cannot make columns/rows responsive to each other.
Bootstrap v4 is a different story, it is built on top of flexbox so the flexibility is greatly enhanced. But still, if you are just talking about gird system, I would say go for css grid and flexbox first.