Flexbox and Grids, your layout’s best friends

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.

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.

• 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)

• 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:

1. 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.
2. 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.

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 <img draggable="false" class="emoji" alt="❤" src="https://s.w.org/images/core/emoji/2.4/svg/2764.svg">

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.

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.

Ready for production

Both Grids and Flexbox are ready to be used in production since they are currently supported on every major browser. Microsoft Edge 15 has Grids support with an older syntax; Edge 16 just fixed this in the stable release on October 17th with the Windows 10 Fall Creators Update.

If you wish to fully support all browsers (yay!) then I’d highly recommend using feature queries to provide an alternative layout for browsers that don’t support Grids or have an older syntax.

.grid-parent{
  /* Fallback layout */
}
 
@supports (display: grid) {
  .grid-parent{
    /* Use grids */
  }
}

Last but not least, take a look at the reported bugs for Grids here and for Flexbox here.

The MagicCube Experience

MagicCube reached out to Aerolab to help build a new identity and develop their new website.

Once the UX and UI proposals for the news page were finished, we could instantly see that this was a great design to be implemented with CSS Grids. Since it has a complex layout, we decided to implement it using this new technology along with feature queries for unsupported browsers and Flexbox to organize the internal elements. Grids gives us fast customization and flexibility to fulfill any required changes in almost no time!

We wanted to be certain that we provided a good browsing experience for everyone. Therefore, for Opera Browser, Samsung Internet, and UC Browser we applied a graceful degradation technique using the CSS supports rule to show an alternative and simpler layout.

The final result was a fully responsive and accessible news page that will use a complex layout when the user has a supportive browser, and otherwise will fallback on a simple design. CSS Grids will let us change the design pattern in a fast and effective way <img draggable="false" class="emoji" alt="💪" src="https://s.w.org/images/core/emoji/2.4/svg/1f4aa.svg">

Using Grids with Flexbox

Don’t let the muggles get you down—start using CSS Grids today. The unfounded rumors about Flexbox Vs. Grids shouldn’t stop you now from implementing new exciting layouts in your websites. Easy customization and great browser support are more than enough to welcome this technique into our everyday tooling.

If you are not sure where to start, scroll down and download the boilerplate we made for you! <img draggable="false" class="emoji" alt="😉" src="https://s.w.org/images/core/emoji/2.4/svg/1f609.svg">

Resources

Learning and using CSS Grids can be overwhelming at first. Luckily, there are many resources out there to help us out:

• Paper
  Our old, faithful friend.
  The best way to begin thinking about a grid structure is to draw it on paper; you’ll be able to see which are the columns, rows, and gaps you’ll be working on. Doodling on paper doesn’t take long and it will give you a better understanding of the overall grid.
• Developer tools
  Firefox Developer Tools has a great built-in integration with CSS Grids that will let you toggle a visualization of the columns, rows, and gaps of your current grid.
  Chrome released a similar tool, check it out here.
• Read, learn, play!
  If you didn’t get the chance to try CSS Grids yet, you should take a look at these wonderful links:
  
  - Grid Garden: Have you heard of FlexboxFroggy? Well, Grid Garden is another really cool game to learn CSS layout.
  
  - Grid By Example: A great project by Rachel Andrew that will teach you from the basics. It also has many patterns that you might find useful every day.
  
  - A Complete Guide to Grid: CSS-Tricks article, ideal for your bookmarks