Flexbox and Grids, your layout’s best friends

Flexbox and Grids, your layout’s best friends
By ID Media | Wednesday 8th November 2017

We decided to debunk the myths around Flexbox & Grids in order to show you the power of these two technologies working together.

It took more than six years to have CSS Grids implemented across all browsers. Throughout its history, the spec has always been surrounded by controversy. In 2011, it was met with skepticism as the Microsoft Developer Team announced prefixed support for IE10. The lack of information about the W3C proposal made some developers wonder whether there was an actual need for another layout system, since we already had floats, tables, and some Flexbox working in browsers back then.

However, thanks to the effort of developers and CSS Working Group members such as Rachel Andrew and Jen Simmons, the Grids hype started to grow and, with that, the behind-flag and nightly implementations.

As of March 2017, Grids has been implemented in every major browser, but there are still a few myths and rumors surrounding the specification. The purpose of this piece is to tackle down those myths and enjoy developing our websites with this new technique we use at Aerolab, called Frids-layout.

The notion that “Grids has arrived to kill Flexbox” or that now that Grids is ready for production we should use “Flexbox as Grid’s fallback” could prove harmful. I’m hoping we can avoid that mindset.

So bear with me and let’s take a look at those myths in order to understand the true power of two technologies working together, rather than against each other. We’ll also look into a real use case that’s currently in production and, at the end of the article, you’ll find an HTML & CSS boilerplate so you can begin working with Grids today.

The myths, busted

Of the series of “Grid vs. Flexbox” rumors that started to sprout back in 2010, the two I mentioned earlier are the only ones worth debunking.

  1. Grids arrived to kill Flexbox.
    No. Only one will die tonight, and it’ll be you, Peter Pettigrew table layout!
    People have a tendency to pit technologies (and people…) against each other; and even though comparison and competition are often good for the advance of the industry, this isn’t one of those cases.

Flexbox and Grids were developed at similar times but with different goals in mind, which we’ll analyze further in this article. If after reading this you still have a tiny spark of a doubt, remember that Grids (1) and Flexbox (2) have the same editors for the W3C draft. They work together, they don’t compete with each other 😊

  1. Flexbox is Grid’s fallback.
    Don’t chase the Quaffle if you see The Snitch
    This takes us back to the previous point: Flexbox’s goal is different from Grid’s. Therefore, we shouldn’t consider the former to be of strict use as a fallback, especially since its support in IE browsers is as bad as Grids.

Working with Frids-layout

Let’s begin by taking a look at their different use cases and the ways in which they complement each other:

  • One-dimensional layouts
    If you need to lay your content in one dimension, no matter if it’s horizontal (x-axis) or vertical (y-axis) and you want your layout to respond to the element’s content, then flexbox is what you’re looking for. It’s just right for (but not limited to) components.
  • Two-dimensional layouts

If you need to display your content both on the x-axis and y-axis that means you have… A grid! This property is ideal for page layouts and complicated, non-linear components.

There are, of course, exceptions to every rule, but you will find yourself more comfortable if you reserve Grids for major and visually complicated layouts and Flexbox for one line (or more if you apply line breaks with flex-wrap) layouts.

As of 2017, developers became more familiar with Flexbox than with grids, so if you haven’t seen Grids in production yet, I’d highly recommend you check out the Full Stack Fest Barcelona website. They did an impressive work with Grids in the speakers section.

Even though their goals are different, they do share a few internal properties because, after all, they are both layout tools. The shared properties are part of a slightly new CSS Box Alignment Specification, something that developers all around the world have been asking for for a very long time. Remember the hellish ordeal of Vertical Alignment? Good times.

The Box Alignment Spec

The new specification includes content distribution and self-alignment features that can be applied to block elements either in Flexbox or Grids.

Align elements inside a flex container.

Distribute elements inside a flex container.

Align elements inside a grid container.

Let’s stop for a second and take a closer look at the previous demo:

First of all, we create a three-column grid using the repeat() notation, each column is 1fr wide; then, we use align-items and justify-items properties to align the cells in the X and Y axis and align-self and justify-self to align a single cell or to stretch it to its full available height.

These properties are shared by the flexible box layout so you might be familiar with them. The main difference is we don’t type “flex-start” or “flex-end” but only “start” or “end” accordingly.

Distribute elements inside a grid container.

gridgrid

There is another set of properties that Flexbox and Grids will share in the near future: grid-gap. This has been a highly requested feature among developers and it will let us specify the distance between flex elements. The grid-row-gap and grid-column-gap properties will be renamed to row-gap and column-gap respectively. But do not fear! Your current code will keep on working ❤️

Flexbox and Grids together

Once you create your grid, it’s time to add content to the cells. Whether you wish to add images, text, or both, the best way of arranging them in the right place is by using Flexbox.

Embrace the responsive

Unlike floats and other legacy layout systems, Flexbox and Grids were created in the multi-device era. Therefore, they were built with the responsiveness and fluidity that these other methods lack. You will find that there are multiple ways to make either of the two adapt to the user’s screen.

Fluid Flexbox Layout

Flexbox is responsive by default. Once you apply display: flex to an element, you already have a fluid layout, but depending on how much content you have you might want to apply a minimum width to your elements. To do this, you can take advantage of flex-basis and flex-wrap.

wrap

Fluid Grid Layout

To be certain that your grid layout will always be responsive and that its components will have a minimum width, we can use the minmax function and the new fr unit. This unit is designed to help us create flexible grids. One fr equals a fraction of the available space in the grid container. Since it takes into account the gap between cells, it does all the math for us and calculates the right width for each cell.

If you ever wish to change your layout on small devices, you can always rely on media queries.

Readmore:https://aerolab.co/blog/flexbox-grids/