CSS Grid vs Flexbox: A critique

My first intro to positioning with grid and flexbox started with a course on CSS3. Three months after saw me 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. I was motivated to make further research to learn their various use cases.

I got to notice the unending debates about the right choice of a layout. This is due to the fact that each layout comes with its pros and cons. This article attempts to make a KISS(Keep it simple stupid) analysis of each of these layouts. It also highlights the various use each can be applied to. Let's go.

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-dimensional 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 i and my coding partner at Microverse. So from the image below its clear that the parent container is two dimensional because it has rows and columns, i mean you can basically draw a grid over them right? Cool.

Now let’s position our elements.

The easiest way to align the various sections in the web-page would be to use a display grid, let’s do that. You can view the complete code snippet here.

Let’s set a display grid to the main tag. This makes the sections which are direct children of the main tag to be displayed in a row.

.main-container {
 display: grid;
 grid-template-rows: 1fr 1fr;
 gap: 20px;
 height: 500px;
}

Next, we set a display grid to the section that houses the four article tags.

.latest-articles {
 display: grid;
 grid-template: repeat(2, 1fr)/repeat(2, 1fr);
 gap: 20px;
 max-width: 100%;
}

Thus we see how grid helps us position elements on a two-dimensional layout.

1.2 Flexbox does better in one-dimensional layouts
Flexbox looks good on a one-dimensional layout. You want to know what a one-dimensional layout is right? Alright, a one-dimensional layout 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 its one dimensional. Catching the drift are you?

Ok but how is it one dimensional? Well because you can’t draw a grid over it complete with rows and columns. Now you understand i hope.

So going ahead let’s set a display flex to the element with a class of

nav-link

.

.nav-link {
 display: flex;
 height: 90px;
 text-align: center;
}

This makes all nav-links to display on a nice horizontal layout. Cool right.

So to layout 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.

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. Here's an image below, looks quite neat right.

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. Not too cool i presume.

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 (this can be quite solved using this 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.

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.

 Personally, flexbox works for me when I want a one-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.

LinkedIn - https://www.linkedin.com/in/michgoldenukeje/

Twitter - https://twitter.com/MichgoldenU