CSS Grid vs Flexbox: A critique
My first intro to positioning with grid and flexbox started with a CSS3 course. I found myself three months after in a coding Boot-camp for remote software developers.
I was particularly intrigued that I could place an element where I needed it to be using a grid or flexbox layout. This made me begin to notice some “unwritten rules” guiding the use of either. This pushed me to make further research to learn their various use cases.
There have been debates unending about the right choice of a layout. Each layout comes with its pros and cons hence the debates. This article attempts to make a KISS(Keep it simple stupid) analysis of each of these layouts. It also highlights the uses each can apply to. Let’s go.
1. LAYOUTS
1.1 Grid works well for two-dimensional layouts
Grid shines best in a two-dimensional layout. But what is a two-dimensional layout? I will explain it simply this way, if you can take the components in your layout and draw a grid over them, complete with rows and columns then what you have is a two-dimension layout. To illustrate, say you want to do a visual hierarchy also known as a design tear-down of a web-page. Here is a design tear-down of Smashing magazine webpage a popular online magazine designed by my coding partner and me at Microverse. So from the image below it's clear that the parent container is two-dimensional because it has rows and columns, I mean you can draw a grid over them. Simple right? Now let’s position the elements.
The easiest way to align the various sections in the webpage would be to use a display grid, let’s do that.
Positioning with grid and flexbox
Let’s set a display grid to the main tag. This makes the sections which are direct children of the main tag to take a row positioning.
Next, we set a display grid to the section that houses the four article tags.
Thus we see how grid helps us position elements on a two-dimensional layout. Now to flexbox…
1.2 Flexbox does better in one-dimensional layouts
Flexbox looks good on a one dimension layout. Which is a layout in which you position items on individual rows and columns without respect to the next row or column. Continuing with our design tear-down code above, let’s go position elements on the top nav-bar. But why the top nav-bar? Because it’s one dimensional. How is it one dimensional? Well because you can’t draw a grid over it with rows and columns. So going ahead let’s set a display flex to the element with a class of nav-link.
This makes all nav-links to display on a nice horizontal layout. Cool right.
So to lay out the whole web-page we used grid. But to position and align each child element, flexbox was our buddy. With grid, we have more control over how the whole page comes together. Whereas flexbox helps us position and align elements.
Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts. — Per Harald Borgen (co-founder at Scrimba)
2. OVERLAPS
2.1 Grid overlaps are quite cleaner
Grid easily permits the overlapping of items. Thus we have the leeway to place items across grid lines or even within the same grid cell.
2.2 Flex items overlap become quite “dirty”
Overlap of flex items can be achieved but not without its cons. To overlap flex-items, one would have to use negative margins or absolute positioning. Which invariably removes items from the flex layout.
3. CLUTTER
3.1 Flexbox quite complicating
Flexbox could get a tidbit complicated with the use of flex-basis, flex-grow, flex-shrink. One might also contend with setting width, min-width, max-width to flex-items. There is also the need to deal with whitespace or gutters between flex items (below is a code that solves this using the calc function).
The use of various properties to define flex items might not be an issue in some use cases. In some other cases, it could result in a lengthy piece of code that could become a debugging nightmare.
3.2 Grid: A less complicating layout
Grid allows us to use grid lines to fix items right into their place. This prevents the occurrence of gutters by using space-occupying features like fractional units.
SUMMARY
Personally, flexbox works for me when I want a single-dimension-layout that has no connection to how items in the next row or column would be positioned. On the other hand, I go for a grid layout if I am setting the layout for the parent container and also if my layout is going to be two-dimensional.
