Flexbox and Grids, your layout’s best friends

It took six years to have CSS Grids carried out throughout all browsers. All through its historical past, the spec has been surrounded by controversy. In 2011, it was met with skepticism because the Microsoft Developer Staff announced prefixed support for IE10. The lack of knowledge concerning the W3C proposal made some builders wonder if there was an precise want for an additional format system, since we already had floats, tables, and a few Flexbox working in browsers again then.

As of March 2017, Grids has been carried out in each main browser, however there are nonetheless a number of myths and rumors surrounding the specification. The aim of this piece is to sort out down these myths and luxuriate in growing our web sites with this new approach we use at Aerolab, known as Frids-layout.

The notion that “Grids has arrived to kill Flexbox” or that now that Grids is prepared for manufacturing we must always use “Flexbox as Grid’s fallback” might show dangerous. I’m hoping we will keep away from that mindset.

So bear with me and let’s check out these myths with a view to perceive the true energy of two applied sciences working collectively, reasonably than towards one another. We’ll additionally look into an actual use case that’s at present in manufacturing and, on the finish of the article, you’ll discover an HTML & CSS boilerplate so you may start working with Grids right now.

The myths, busted

Of the collection of “Grid vs. Flexbox” rumors that began to sprout again in 2010, the 2 I discussed earlier are the one ones value debunking.

  1. Grids arrived to kill Flexbox.
    Folks tend to pit applied sciences (and other people…) towards one another; and regardless that comparability and competitors are sometimes good for the advance of the business, this isn’t a kind of instances.

Flexbox and Grids had been developed at related instances however with completely different targets in thoughts, which we’ll analyze additional on this article. If after studying this you continue to have a tiny spark of a doubt, keep in mind that Grids (1) and Flexbox (2) have the identical editors for the W3C draft. They work collectively, they don’t compete with one another 😊

  1. Flexbox is Grid’s fallback.
    Don’t chase the Quaffle in the event you see The Snitch
    This takes us again to the earlier level: Flexbox’s purpose is completely different from Grid’s. Due to this fact, we shouldn’t think about the previous to be of strict use as a fallback, particularly since its help in IE browsers is as unhealthy as Grids.

Working with Frids-layout

Let’s start by looking at their completely different use instances and the methods through which they complement one another:

  • One-dimensional layouts
    If you have to lay your content material in a single dimension, regardless of if it’s horizontal (x-axis) or vertical (y-axis) and also you need your format to answer the factor’s content material, then flexbox is what you’re searching for. It’s excellent for (however not restricted to) elements.
  • Two-dimensional layouts
    If you have to show your content material each on the x-axis and y-axis meaning you could have… A grid! This property is good for web page layouts and complex, non-linear elements.

There are, in fact, exceptions to each rule, however you will see that your self extra comfy in the event you reserve Grids for main and visually sophisticated layouts and Flexbox for one line (or extra in the event you apply line breaks with flex-wrap) layouts.

As of 2017, builders turned extra accustomed to Flexbox than with grids, so in the event you haven’t seen Grids in manufacturing but, I’d extremely advocate you take a look at the Full Stack Fest Barcelona web site. They did a formidable work with Grids within the speakers section.

flexbox-grids-full stack fest-barcelona

Regardless that their targets are completely different, they do share a number of inside properties as a result of, in spite of everything, they’re each format instruments. The shared properties are a part of a barely new CSS Box Alignment Specification, one thing that builders all world wide have been asking for for a really very long time. Keep in mind the hellish ordeal of Vertical Alignment? Good instances.

The Field Alignment Spec

The brand new specification consists of content material distribution and self-alignment options that may be utilized to dam components both in Flexbox or Grids.

Align components inside a flex container.


Distribute components inside a flex container.


Align components inside a grid container.


Let’s cease for a second and take a better take a look at the earlier demo:

Initially, we create a three-column grid utilizing the repeat() notation, every column is 1fr extensive; then, we use align-items and justify-items properties to align the cells within the X and Y axis and align-self and justify-self to align a single cell or to stretch it to its full obtainable peak.

These properties are shared by the versatile field format so that you is perhaps accustomed to them. The primary distinction is we don’t sort “flex-start” or “flex-end” however solely “begin” or “finish” accordingly.

Leave a Reply

Your email address will not be published. Required fields are marked *