Understanding the Difference between CSS3 Flexbox & Grid Layout

The CSS Box Model is pretty much the current mantra for organizing elements and laying out websites.  Oh the joys of floats, absolute positioning, percentage based widths, and overflow hidden. In the near (optimistic) future, Flexbox and Grid Layout are going to radically change the way we approach layout and build websites.  These new properties flip our CSS-hack approach on its head and make us consider layout from a logical perspective. Finally! In fact, the foundation of the grid layout seems to be loosely based on table based layout semantics, albeit far more flexible, adaptable, and without that gag-reflex that tends to be associated with using tables for layout.

As exciting as this is, the spec is still in its infancy and forces us to implement a plethora of vendor prefixes in order to start exploring the possibilities. All new properties need to start somewhere, so I encourage all designers to start exploring and getting your hands digitally dirty. The sooner we start applying these properties, the faster they will be implemented, but tread carefully and test, test, test.

What is Flexbox and Grid Layout and how can we utilize them?

When I first starting looking into these new properties I was a little confused as to what the difference was between Flexbox and Grid Layout. When do I use one over the other? Is there a need for both? The property values are pretty similar and both seem to require a parent container that manipulates the position of the child elements. Like every CSS property or HTML element there is always a few ways to do the same thing, but there is certain syntax and semantics that are better suited for particular situations.

This is how I understand Flexbox and Grid Layout and their implementation:

CSS3 Flexbox – is best suited for targeting the position of child elements and their spatial relationship within a parent element. It provides a fluid solution and makes aligning and spacing elements a joy! That being said, the solution for wrapping overflow elements is still buggy, but the potential is there.

Screenshot of CSS3 Flexbox using -webkit vendor prefix

The Code

/* abbreviated CSS for parent element */
display: -webkit-box;		
-webkit-box-orient: horizontal; /* Box-orient specifies whether the children of a box should be laid out horizontally or vertically - horizontal|vertical|inline-axis|block-axis|inherit */
-webkit-box-align: start; /* Box-align specifies how to align the child elements of a box - start|end|center|baseline|stretch */
-webkit-box-pack: start; /* Box-pack specifies where child elements of a box are placed when the box is larger than the size of the children - start|end|center|justify */

/* abbreviated CSS for child element, showing fraction use */
-webkit-box-flex:1.0; /* base width according to available space */
-webkit-box-flex:2.0; /* 2x base width according to available space */
-webkit-box-flex:3.0; /* 3x base width according to available space */

CSS3 Grid Layout – is best suited for organizing the layout structure of higher-level elements such as headers, sections, asides, and footers, while providing a convenient way to implement a true grid with gutters. The entire structure of the grid gets defined by the parent element and subsequent child elements can utilize that organization through various properties. By separating the layout structure from the content it will be easier to modify layouts for multiple devices through the power of Media Queries while maintaining a consistent grid. It would appear that print and digital have finally blended!

Screenshot of CSS3 Grid Layout with -ms vendor prefix. IE 10 is the only browser currently supporting this property at the time of writing this (Dec 2012). View Demo (make sure to open in IE10)

The Code

/* abbreviated version of parent element defining the grid structure */
height: 100vmin; /* vmin = viewport height/width minimum applies 100% height that works! */
display: -ms-grid; /* current vendor prefix for grid layout property */
-ms-grid-columns: 1fr 2% 1fr 2% 1fr; /* 3 column grid = 5 columns, inclusive of gutters, 1fr = 1x base width of available space, 2% acts as the gutters */
-ms-grid-rows: 1fr 2% 0.5fr 2% 4fr 2% 1fr; /* 7 rows, inclusive of gutters */

/* abbreviated element example...same rules apply to the rest of the elements */
-ms-grid-row: 1; /* targets specified row */ 
-ms-grid-column: 1; /* targets specified column */
-ms-grid-column-span:5; /* if you want this element to flow across all 5 columns */

This is merely my interpretation of these new properties so I encourage you to form your own understanding and play around with the CSS. Below are the W3 definitions for those looking for the true technical definitions. Enjoy!

Here is the W3 definition for Flexbox:

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Entire Specification: W3 CSS3 Flexbox

Here is the W3 definition for Grid Layout (take a deep breath):

Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts. It excels at dividing up space for major regions of an application, or defining the relationship in terms of size, position, and layer between parts of a control built from HTML primitives.

Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the Grid doesn’t have content structure, and thus enables a wide variety of layouts not possible with tables. For example, the children of the Grid can position themselves with Grid lines such that they overlap and layer similar to positioned elements.

In addition, the absence of content structure in the Grid helps to manage changes to layout by using fluid and source order independent layout techniques. By combining media queries with the CSS properties that control layout of the Grid and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, without needing to alter the semantic nature of their content.

Entire Specification: W3 CSS3 Grid Layout

More Resources: