Multi-column Layout Using Named Areas

Demo starter files

Multi-column layouts are a bread and butter thing on the web. This lesson covers some of the ways this was accomplished in the past, how CSS Grid makes this dead simple to do now, and what kind of experience we can still provide users who don't have grid support.

The Holy Grail

The Holy Grail Layout as it's often called, is a common type of page layout that involves a full-width header, then columns for navigation, the main content, and related content, and finally a full-width footer. It looks very roughly like a chalice.

header
nav
main
aside
footer

Previous Methods

In the Before Time... methods for creating side by side content involved techniques not explicitly designed for general layout. Here's a brief summary, in no particular order.

HTML Tables

How it works: HTML tables are intended for displaying tabular data. In order to do that properly and readably, a few features snuck into the table display specification that weren't found anywhere else. It is therefore possible to put entire columns of content inside individual <td> table cells to get those features.

Advantages:

  • Equal height columns
  • Easy vertical alignment

Drawbacks:

  • Semantically atrocious HTML
  • Difficult column width control

Inline-Blocks

How it works: We can trick the browser into treating entire columns like gigantic letters on a single line of text.

Advantages:

  • Equal height columns
  • Vertical alignment is possible

Drawbacks:

  • Ugly HTML. Once converted to inline elements, the whitespace between the columns in our HTML is rendered onto the page like the whitespace between words.
  • Width calculations are a pain

Workarounds for the white space issue are complicated, and the only easy way to fully prevent problems is to format your HTML in a non-standard way.

CSS Tables

How it works: CSS allows us to manually make non-table elements behave like native HTML table elements.

Advantages:

  • Slightly less atrocious HTML
  • All the same behaviors of HTML tables

Drawbacks:

  • Extraneous markup (HTML) is still required
  • Difficult column width control

The overall width of the table is more important than the widths of each column. If your column widths don't add up properly, they're converted to ratios of the total table's width. Also sometimes that's not what happens either. More info in the resources below. Tables are just weird.

Floats

How it works: Floating entire columns of content rather than smaller things like pictures, allows them to sit next to one another.

Advantages:

  • Semantically better HTML
  • Fairly predictable and responsive behavior

Drawbacks:

  • Equal height columns are very difficult to achieve
  • The need for a clearfix, since the entire floating columns are removed from document flow
  • A fair amount of math in calculating column widths + margins + padding, etc.

Floats are still heavily employed by CSS frameworks, and as fallbacks for browsers that don't yet support grids. While we won't walk through the steps in this demo, we can build our layout using floats, and then override those setting with our grid version. Browsers without grid support will ignore the CSS properties they don't recognize.

Modern Methods

Flexbox

How it works: Each flex item can be as tall as we want. Nothing is stopping us from creating entire columns of content in a giant, super tall flexbox row.

Advantages:

  • Clean, semantic HTML
  • Equal height columns
  • Easy vertical alignment
  • Very good responsiveness

Drawbacks:

  • There's still some work in margins and spacing of the columns
  • Minor, but like all previous methods, column widths are controlled by the child elements (the columns themselves)

Grid

How it works: Grid is designed specifically around this need.

Advantages:

  • All of the advantages of flexbox
  • Almost all aspects of the layout can be defined on the parent grid container
  • fr units help handle the math of setting column widths

Drawbacks:

  • Browser support is very good, but not yet "universal"

CSS Grid is not just a new tool for creating tried and proven layouts like the holy grail. Grid allows us to create layouts that were previously impossible, encourages using negative space in ways it was often missing on the web, and is a first class citizen of responsive design. So while the holy grail layout and similar variations are a necessity to know, I also encourage you look for other ways to lay out content that's more - yup, I'm going there - outside the box!

Providing a Good Experience for Everyone

This demo includes a base layout that covers the broad majority of browsers. It then uses a combination of @supports and @media queries to add columns as available space and browser feature support allow.