CSS Grid vs Flex in Real Life

Photo by Will Francis on Unsplash

The Grid and Flex methods are the two primary layout structures in CSS and because they are two different methods that can mostly be used to arrive at the same result, we sometimes end up in a dilemma on which to use for various use-cases. You must have found some popular pointers and terms that have been used to differentiate the two layout styles in the past but in this guide, rather than use some of the popular jargon, I'll go with plain English and then throw in some use-cases to help you relate the concepts better for a clearer understanding of both concepts, and of course, some visual and code examples too -- sit up and let's trash this one, will ya.

---

First, we'll adjust our mindset

Generally, the Grid and Flex systems are categorized together as layout systems or structures, we'll start by dropping that lingo, as it will be easier to set them apart if we let our head and mind agree that Grid is used to build layouts while Flex deals with arrangement.

What is a layout and what is an arrangement?

A layout system on a page is more of cutting up patterns on the page, regular or irregular it doesn't really matter, so long as the goal is to split up the page into a pattern where each compartment holds either some content, an illustration, or just color, again it doesn't really matter, you want to demarcate your page into compartments? grid is a perfect choice.

Photo by Annie Spratt on Unsplash

An arrangement on the other hand is how you want a set of sibling contents to be ordered and how you want them to share the available space. Are these entities supposed to line up horizontally (right to left or vice-versa) or vertically (top to bottom or vice-versa)? Are there bigger siblings among these elements that need to eat up more space than the others as the available space increases? These questions are best answered by the Flex display system.

Photo by Scott Webb on Unsplash

Unlike in the Grid system where I mentioned that the contents usually matter less as the grid system is usually about space allocation resulting in a pattern or design that must have been earlier visualized, the flex system is more content-oriented and can deliver some un-foreseen behavior depending on its contents - don't trust a Flexbox, they say. Using flex is more like instructing sibling content on how to behave around one another and what to do with leftover space.

Real-life CSS

Let's get into some real-world representations of both systems first then we'll look at some actual web structure implementation use-cases.

Real-World Flex Systems:

Think of a random queue of people, with each person on the queue being an entity, there are some decisions to be made if you're in charge of keeping the queue in order, like:

• To best manage the available space, do they line up side-by-side (horizontal) or does each person stand behind the other person (vertical)? in the flex system, this can be decided with the "flex-direction" property.
• Should they obey covid restrictions and stand as far apart from each other using up the available -- 1-dimensional space or can they just stay tightly knitted and ignore the leftover space because this is North Korea (with zero reported Covid 19 case), pun intended. This can be achieved with a Flex property called "justify-content".
• What happens when some people leave the queue and we have more room? do we spread out? does Mr. A take more of the available space than the rest of us because he is claustrophobic? Or do we just close up the gap and remain tightly close to each other to keep a warmer temperature.

Real-World Grid System:

This time we'll model a parking lot instead. Usually, the constructors just demarcate the available space into parking spaces, and it usually does follow a particular pattern, either regular or irregular depending on the design or plan, not the car. Now let's not get the wrong idea that the Grid system is all about a rectangular space demarcated evenly as I see it gets represented this way a lot, using the template features of the grid system, these demarcations can be just as irregular as you want them to be.

Some web design use cases

Grid

• A gallery of media, even a layout as complex as the Masonry can be seamlessly implemented using the grid-template-areas property of a grid system.
• Modern horizontal scrolling layouts are also best implemented with the Grid system because usually, the pages need to be full width and height regardless of content.
• Many modern form layouts with single or double columns.

Flex

• An arrangement of icons or buttons, for example, social media icons or multiple call-to-actions arranged side-by-side or top-down.
• Hanging letters or cards
• Displaying items of a dynamic quantity and keeping them organized irrespective of their number.

---

Conclusion Whew! The focus of this article wasn't to go too much into the details of the Grid and Flex system, rather its purpose was to point out their differences and where each system thrives, using some examples that we do see around every day.