CSS Grids & Flexbox
When I learned about website responsiveness, CSS Grids and Flexbox were the most difficult for me to understand. The first question that crawled in my mind was, what’s the difference between them? As from what I learned, I picked that I can use them both for almost the same purposes. So, I tried to dive into this mini pond of terminologies and found some basic points that make them different from each other. I hope they’d help you in a better understanding of grids and flexboxes as well.
When talking about grids and CSS, the clearest difference is about the dimension. Grid is like tables i.e. it consists of columns and rows both. As compared to grids, flexbox is about either rows or columns. Thus, grids are two-dimensional whereas flexboxes are one-dimensional.
Ayush Gupta in his article demonstrated the grids and flexbox very clearly using these illustrations.
Layout and Alignment:
This tweet pretty much sums up about what is the purpose of grids and flex. When you need to work on the layout, the grid would be a better option as compared to flex. Though, the alignment of contents inside the box could be done better with flex.
While working on making gaps between the columns and rows, the grid also gives better flexibility than flex. As you’d have to do all those paddings and margins because of flex that would make the code more complex.
Conclusion:
Thus, when you’ve to work on your project next time, ask yourself these 2 questions:
- Do I need to work on columns and rows?
2. Do I need to work on either column or row?
If it’s the first one, then use a grid, if it’s the second one, then use a flex-box.
