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. 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 then what you have is a two-dimensional layout. rows and columns To illustrate, say you want to do a of a web-page. is a design tear-down of a popular online magazine designed by 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. visual hierarchy also known as a design tear-down Here Smashing magazine webpage i and my coding partner 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. { : grid; : fr fr; : ; : ; } .main-container display grid-template-rows 1 1 gap 20px height 500px Next, we set a display grid to the section that houses the four article tags. { : grid; : (2, 1fr)/ (2, 1fr); : ; : ; } .latest-articles display grid-template repeat repeat gap 20px max-width 100% Thus we see how grid helps us position elements on a two-dimensional layout. 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. 1.2 Flexbox does better in one-dimensional layouts 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 { : flex; : ; : center; } .nav-link display height 90px text-align 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. (co-founder at ) Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts. — Per Harald Borgen Scrimba 2. OVERLAPS 2.1 Grid overlaps look neater 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. 2.2 Flex items overlaps are less neat 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. 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 between flex items (this can be quite solved using ). deal with whitespace or gutters 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. 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 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. Come Say Hi 💜 GitHub - https://github.com/mikenath223 LinkedIn - https://www.linkedin.com/in/michgoldenukeje/ Twitter - https://twitter.com/MichgoldenU
