Flexbox vs Grid: Ready for the fight?

Published in

Adalab

3 min readJan 18, 2019

Written by Paloma Ania

At programming time, we have two main tools that front-end developers use in order to position the elements in the available space. Both are effective and sometimes doubts appear about when to apply each of them. If you keep on reading you will discover this soon, “The Fight is ready to begin!”

Round 1: Flexbox

The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

So we have a principal flex container (“father”) and inside we have several flex items (“children”), a fact that allows us to place the elements in the space in the way we want.

Round 2: Grid

In graphic design and word processing applications, a Grid is a series of vertical and horizontal lines that are used to subdivide a page vertically and horizontally into margins, columns, inter-column spaces, lines of type and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multipage documents, making the design process quicker, and ensuring visual consistency between related pages.

This tool earns its name because we could imagine it as an invisible master grid where we put all the elements we want in its own predefined place. It is very useful when we need to position elements in big spaces or give them format for different devices (mobile, tablet, desktop).

Conclusion
At this point in the article, we have seen the principal characteristics of Flexbox and Grid. Now we could say that it is not a competition but a cooperation between both tools.
At times we will need to use Flexbox, which is more appropriate to the components of an application, and small-scale layouts. While the Grid layout is intended for larger scale layouts and for adaptation among devices (mobile, tablet, desktop). Furthermore, there will be situations where we could mix both of them, for example using Grid to create an external container and Flexbox for the elements inside.
Take the time to learn Grid and Flexbox and decide for yourself how you can use them to win in your coding life.

Sources: