Overview
In the current scenario, we all know how flex and grid are useful to design our layout. Using this we can easily design our layout without using positioning and float. Also, flex and grid share common features. So,are you a little bit confused when to use flex and when to use grid?
Here we will understand the difference by looking through some demos. This allows you to look at certain layouts and decide when to use the grid and when to use the flex.
1. Difference between flex and grid
The main difference between flex and grid is that flex uses a one dimensional (row or column) layout while grid uses a two-dimensional (row and column) layout
And sometimes we are confused about when to use flex and when to use grid so if you have a content-based layout at that time you can use flex because it will give you flexibility and when you have a fixed layout at that time you can use grid structure..
2. when to you use grid
Let’s look at some layout and understand how a grid is suitable for this type of layout instead of flex.
Demo 1 :
Here in this example we can see our structure is reversible structure means element 1, 2, 3 is set to left to right and element 4, 5, 6 is set right to left it means every (6n+4), (6n+5), (6n+6) nth-child elements are set inverse (right to left).
Looking at this structure we can guess that it would be better if we use the grid to easily create this kind of structure as it provides flexible ways to position the element like grid-column-start: position; grid-column-end:position; grid-column-start property sets the element at starting position and grid-column-end property sets the element at ending position.
Our example we have 3 column structure
so if we write
:nth-child(6n+4) { grid-column-start: 3; grid-column-end: 3;} every 4th element sets at the last position (for ex. block 4).
and if we write
:nth-child(6n+5) { grid-column-start: 2; grid-column-end: 2;} every 5th element sets at the second position (for ex. block 5).
and if we write
:nth-child(6n+6) { grid-column-start: 1; grid-column-end: 1;} every 6th element sets at the first position (for ex. block 6).
why we used grid instead of flex in this example
because in our layout every 4th, 5th, and 6th element is set in reverse order so using grid property grid-column-start and grid-column-end so easily change the position of blocks. If we use flex, we have to use the order property of flex, so we have to apply order in all elements so it becomes more complex and dynamically added data disturbs the order. That’s why the grid is more flexible instead of flex in this layout.
You can get full code of this example in below link:
Codepen Example
I hope now you easily understand how we use the grid in this structure or let’s explain in one another example.
Demo: 2
Here in this example we can see we have a structure of blocks. Some of the blocks are occupied a height of double to their beside blocks and some of the blocks are occupied a width of double to their beside blocks.
In our layout the first element is setted double width and double height of his sibling elements and our last block is setted double width of his sibling elements.
why we used grid instead of flex in this example
Because in our layout the 3rd image shows a man typing something in his laptop. This image is set bottom side of the second image whose logo name is spreever. using grid we can easily set this image at that bottom right position using grid-column property. If we use flex then it will make the same height of every block. In our layout the first image height is double than the second image so our second image height also will become the same height of the first image. Therefore our third image will wrap down the side not bottom of the second image .
You can get full code of this example in below link:
Js Fiddle
3. when to you use flex
Let’s look at some layout and understand how flex is suitable for this type of layout instead of grid.
Demo 1 :
In this example we can see we have a layout of blocks. All blocks width is divided into 3 means 100% / 3 of parent width except the last element, because we add one property flex-grow:1; Using this we can make our element grow to the full space of the parent.
If you see the layout our last element (4th) element is full width because there are no any sibling elements. If we have elements like 5th and 6th then 4th, 5th and 6th elements also divided into 3.
why we used flex instead of grid in this example
Here in this example we have used the flex property. If we use grid instead of flex then also it will work but only when our layout is static. In this example our layout is not fixed its dynamic. So when we have this type of requirement that means to grow the content based on element then we have to use flex because flex gives a one property whose name is flex-grow. Using flex-grow we can grow the element to the rest of the parent element width. If we use a grid , the grid has no option to grow the element.
You can get full code of this example in below link:
Js Fiddle Example
Demo 2 :
In this example we can see our blocks are set to left and right if we have a layout like our first element is stuck on the left side and the second element is stuck on the right side so that time we can use flex.
Flex has one property whose name is justify-content. Using this we can justify our content at start position, end position, center position and two more flexible values for spacing are space-between and space-around.
In our example we use justify-content:space-between; for the first 4 elements using this it will add a space between our elements. After that we can see our last two elements have not stuck in the left side and the right side because we used justify-content:space-around; Using this will add a space around the elements not in between.
why we used flex instead of grid in this example
Because in this example our first four elements are set in one on the left side and second is on the right side and the remaining space will be put in between both elements if we resize the screen then space will be reduced not the element. Because we use flex property justify-content:space-between. while in the grid it will divide into equal parts so we can not achieve this type of layout
same for the second example if we want to put an equal space around the elements we can achieve easily using flex property justify-content:space-around;
You can get full code of this example in below link:
Js Fiddle Example
Conclusion
I hope that you will find this blog helpful for the novice for When to use flex or grid.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
