Diffrence between css Grid vs Flexbox
Posted By : Himanshu Khurana | 30-May-2018
Grid
Which one should I use for CSS, Grid or Flexbox? In addition to the video in this article, we will look at this issue in more details in the next few paragraphs.
To answer this question, let's first understand what the CSS grid is. Essentially, it allows us to create a design for our page to locate HTML elements.
This design was created by defining columns and rows, so the CSS grid is using two-dimensional space.
This is accomplished by adding display:grid to rotate the wrapper (in this case, the <body> element) into the mesh. In addition, columns and rows are defined, as well as the names of the cells created.
The following is the final code of the <body> container:
body {
display: grid;
grid-template-columns: 30% auto;
grid-template-rows: 60px auto 60px;
grid-template-areas: "hd hd"
"sidebar main"
"footer footer";
}
The design of a defined grid is one step, and another important part is the positioning of html elements. Here is the simplified CSS code (complete code can be found here):
header {
grid-area: hd;
}
aside {
grid-area: sidebar;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
A grid area is a property that allows you to assign HTML elements to specific cells/areas defined by a grid template area.
As this example shows, CSS Grid is great when creating complex design and positioning elements like these. Of course, you can easily add multimedia queries and other cool features, if you want to learn more, please check our complete course again.
Flexbox
The CSS Grid helps us create page layouts and positioning elements. What is the idea behind Flexbox?
Flexbox is also enabled by displaying properties. Like the CSS Grid, it helps us locate HTML elements.
Unlike CSS grids, it is about positioning elements in one-dimensional space. However, we do not have rows or columns. We only get one of them.
Here's an example:
.navigation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
Grid vs Flexbox
The last example not only shows how to place Flexbox side-by-side or one on top of another, Flexbox is very useful. It also shows how Flexbox and CSS Grid work together.
You can use grids to create generic designs and Flexbox to place elements inside cells for all situations where you just place them in one dimension (row or column).
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Himanshu Khurana
Himanshu is an experienced Frontend developer with experience and capabilities to build compelling UI's for Web and Mobile Applications. Himanshu likes playing cricket and listening music.