Layout Patterns Some of our common patterns for layout and navigation

Column Layouts

Common patterns are defined below. Each group is assigned a unique group class so they can be easily nested.

For equalizing column heights, this demo uses a css-only approach. More on that here.

Class naming convention

Examples

Group 2a

Breakpoints:

  1. Stacked in source order
  2. 30/70 split in source order

Group 2b

Breakpoints:

  1. Stacked in source order
  2. 70/30 split in reversed source order

Group 2c

Breakpoints:

  1. Stacked in source order
  2. 50/50 split in source order

Group 2d

Breakpoints:

  1. Stacked in source order
  2. 50/50 split in reversed source order

Group 2e

Breakpoints:

  1. Stacked in source order
  2. Fixed-width right alignment for item-b

Here is some text to show that it wraps as expected within its column. Here is some text to show that it wraps as expected within its column. Here is some text to show that it wraps as expected within its column.

Group 2f

Breakpoints:

  1. Stacked in source order
  2. Fixed-width left alignment for item-b

Here is some text to show that it wraps as expected within its column. Here is some text to show that it wraps as expected within its column. Here is some text to show that it wraps as expected within its column.

Group 3a

Breakpoints:

  1. Stacked in source order
  2. 33/33/33 split in source order

Nested groups

The example below: Group-2a with a Group-3b in item-b.

Breakpoints:

  1. Stacked in source order
  2. Outer group: 50/50 split in source order; group within second item stacked in source order
  3. Outer group: 50/50 split in source order; group within second 33/33/33 split in source order

Equalizing Column Heights

There are bunch of ways to equalize column heights. Each has drawbacks, so we need to pick an approach based on what a particular design requires. Some options we like:

  1. Big bottom padding with a negative margin: This CSS-only approach works well as long as you don't mind having overflow: hidden on the group container. It's used on this demo page and you can find the CSS in demo.css. If the design requires padding around the bottom of the group element, you'll need to use wrapper element inside the group element and set overflow hidden on that instead of the parent.
  2. Scripting it: The EqualHeights JavaScript file found in this repo will do the trick. The downsides are that it requires JS to pull it off, but it tends to work well with trickier layouts because all it does is set a min-height across sibling columns on load and resize.
  3. Flexbox and Display: table: Both options are great but flexbox limits our support to IE10+ while display: table doesn't allow us to show columns out of their source order.
  4. Faux Columns with background images, CSS gradients, or positioned pseudo-elements: Work best when the design is simple and doesn't require CSS exceptions which can make the styles hard to maintain. Example using pseudo-element.