Flex vs Grid (CSS)
Flex and Grid are to advance features of CSS(Cascading Style Sheet). Modern websites usually contain two-part HTML and CSS. HTML defines the structure and contents of a webpage while CSS is used to style the webpages.
The above image sums up everything and gives us a brief idea about the difference.
Flex: Flex is used to add styling to your simple HTML file. Look at the below code snippet in HTML part have four div tag inside a single div tag. CSS portion is inside <style> tag.
We have a parent <div> whose class is big-box and contains four <div> tag with classes named as box1, box2, box3 and box4. We have set the display attribute of big-box to flex this makes our big-box a flex meanwhile the elements inside the flex become part of it. Now we can change the orientation, position, alignment, and other properties boxes inside it. There are many attributes of flex by changing their values we basically change the look of the page. I have uses some of them on my page and here how this looks:
Grid: Grid is also used to add styling to your simple HTML file but it is different from flex. Look at the below code snippet in HTML part have five div tag inside a single div tag. CSS portion is inside <style> tag.
We have a parent <div> whose class is big-box and contains five <div> tag with classes named as box1, box2, box3, box4 and box5. We have set the display attribute of big-box to grid this makes our big-box a grig meanwhile the elements inside the grid become part of it. Now we can change the orientation, position, alignment, and other properties boxes inside it. There are many attributes of a grid by changing their values we basically change the look of the page. I have uses some of them on my page and here how this looks:
Conclusion: The basic difference between flex and grid is that flex implementation is one-dimension while grid implementation is two dimensions. In flex we use one parameter to the position while in the grid we use two parameters to set the position.