How to Choose between Flexbox and Grid Layout?

CSS has always been one of the most important parts of web development, we’ve been building and improving new ways to work with it since the beginning of browsers. A few years ago, creating web page layouts was a very hard job. We were using some CSS properties such as float, positioning a lot of elements with position, and inline-block styling.

What is Flexbox?

Flexbox was introduced in 2009 as a new layout system, with the goal to help us build responsive web pages and organize our elements easily, and, since then, it’s gained more and more attention. It turns out it’s now used as the main layout system for modern web pages. Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It makes our life easier to design and build responsive web pages without having to use tricky hacks and a lot of float and position properties in our CSS code.

What is CSS Grid?

If Flexbox is a powerful layout system because it’s a one-dimensional system (meaning that we can work with rows or columns), CSS Grid is now considered the most powerful layout system available. CSS Grid is a two-dimensional layout system, we can work with rows and columns together, which means that it opens a lot of different possibilities to build more complex and organized design systems, without having to fall back to some “hacky ways” that we were using in the past.

Despite the many differences that Flexbox and Grid have, they do have some properties in similar. The first and biggest thing they share in common is the fact that they are both used for layouts. Before, developers had to struggle with floats. With the help of Flexbox and Grid today, it is possible to easily create all sorts of complex layouts. As for the properties that Flexbox and grid share, these include justify-content, align-content, align-self and align-items.

CSS Grid is for layout; Flexbox is for alignment

When Flexbox was first released, we thought that it could be the best layout system to use to build our web pages, but it wasn’t. Flexbox helped developers start to create more responsive and maintainable web applications, but the main idea of a one-dimensional layout system doesn’t make sense when you need to build a more complex layout design.

CSS Grid really came to help us build more complex layout designs using a two-dimensional way, using both rows and columns. We should aim to use both of them together, but for different purposes. For your layout, use CSS Grid, for alignment of your elements, use Flexbox.

To master and know exactly when you’re going to need and how to use CSS Grid, you should first learn the basics and how Flexbox works, because when you need alignment of elements in your application, it’s Flexbox that you’re going to want to use.

When to use CSS Flexbox

You need a content-first design : Flexbox is the ideal layout system to create web pages if you don’t know exactly how your content is going to look, so if you want everything just to fit in, Flexbox is perfect for that

When to use CSS Grid

You need a layout-first design: When you already have your layout design structure, it’s easier to build with CSS Grid, and the two-dimensional layout system helps us a lot when we’re able to use rows and columns together, and position the elements the way we want

For most cases, both Flexbox and Grid as necessary to overcome modern design challenges.