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 easy 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; columns for navigation, the main content, and related content; and finally a full-width footer. It looks very roughly like a chalice.
This classic type of three column layout isn't ubiquitous anymore (it used to be everywhere). With the proliferation of mobile devices and more dynamic UI's, design trends have moved toward full bleed sections, lower density, larger type, and greater negative space (yay!). That said, it's still a fine option to consider for a layout, and it happens to be a perfect example for showing how CSS Grid helps us to arrange the same content in different ways easily.
Previous Methods
In the Before Time... methods for creating side by side content involved css techniques not explicitly designed for general layout. Here's a brief summary, in no particular order. It should help to show some of the creative ways web designers have solved this problem, and why CSS Grid is such a big help.
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
frunits 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 is designed with progressive enhancement in mind. When you open the files, you'll find it's already set up with a layout that's compatible with virtually all browsers. For the purpose of this demo, we'll use a combination of @supports and @media queries to add columns as available space and browser support allows.