CSS “Grids vs. Flexbox.” When? Which? Why?
CSS Grids and Flexbox are the two mainstream modules to design website layouts. Both of them offer great options to design complex layouts, which was sort of impossible before their introduction in 2007 and 2009 respectively. Despite the differences between them, they do share some similarities, and when to use which, and why is the main question throughout.
Flexbox is great to lines things up in one dimension
The main difference between Flexbox and Grid layout is that flexbox was designed for layouts in one dimension, either a row or a column, whereas Grid was designed for two-dimensional layouts — rows, and columns at the same time. Thus flexbox is more of a micro-level layout tool for positioning multiple elements to a one-dimensional parent container. Grid, on the other hand, is a macro layout tool, mainly used for arranging larger container elements on the page.
Overlapping done right using Grid
Overlapping of certain containers in website design can make the layout more readable, attractive, clean, and more familiar as it resembles the very idea of a magazine layout. Although this overlapping can be achieved with both flexbox and grid, still the latter is preferred. In flexbox one requires looking at very traditional stuff, like negative margins, transforms, or absolute positioning in order to break out of the flex behavior and whereas with grid, one can place items on overlapping grid lines, or even right within the same exact grid cells. Hence, one can say that Grid is especially suitable for creating unusual layouts like broken, asymmetrical, and overlapping layouts.
Content Flow and Content Placement
Flexbox focuses on content flow and the grid on the other hand focuses on precise content placement. Flexbox allows one to allocate space and align-items flexibly, items inside a flexbox shrink or grow according to their content and the space available. Flexbox layout enables one to make decisions on how the content should behave when there’s not enough space or when there’s too much space. CSS Grid, provides a mechanism totally different from flexbox, it enables developers to divide available space for layout into columns and rows using a set of predictable sizing behaviors, and it also allows one to create responsive layouts without extensively using media queries.
Which is better and when?
If you have gone through the above paragraphs then you may have realized that there are definite situations where Flexbox is better, and there are situations where Grid is better suited. Clearly, stating which one is better, is not possible. The only way to find which one is better for you is to think through which serves your intent best. One can also combine flexbox and grid together to design complex, beautiful, and elegant layouts.
Hope you liked this article : )