Multiple CSS Approaches to Responsive Width Centered Containers

Centered column containers are the foundation of almost every website on the internet. The basic approach that everyone knows is the max-width with margin auto approach. Often you see this using pixels.

max-width: 700px;
margin: 0 auto;

Pro: works all the way back to IE7
Con: hard-coded pixel sizes can mess with users who change their default font size. Zoom still works fine though.

Now that we no longer have to care about old versions of IE, there are several ways to better ways to accomplish a responsive centered columns.

Responsive Typography Width

By using a type unit for width we can allow the column to flex with size of the font. This allows us adjust the size by changing the base font size. It also to allows us to easily set column sizes for desired line lengths. The Elements of Typographic Style by Robert Bringhurst recommends no more than 75 characters per line, in ch this amounts to about 60ch.

A Note on ch vs rem or em

Often developers reach for rem or em but in for line length sizing the ch unit works better. The ch unit is the width of the “0” character is in a given font-family and font-size. Whereas em and rem strictly amounts to the font-size and does not take into account the font-family, which is useful to know in the case of condensed or wide fonts. Read What is the CSS ‘ch’ Unit? by Eric Meyer for a good overview.

NOTE: IE10-11 computes ch wrong ignoring the space around the character. So you may need to use rem or em instead. 75 characters is about 36em for an average width font.

max-width: 60ch;
margin: 0 auto;

Pro: Width is set variably based on ch which is the width of the "O" of the font-family and font-size. This
Con: IE10/11 measure ch incorrectly so sizes will be smaller.

Containers with full width backgrounds

Having a full width background with a centered container for content is a common technique for hero type areas. Typically if you want to do this you need to have a wrapper around your centered container element like so:

.wrapper {
  background: lightcoral;
}

.wrapper > * {
  max-width: 60ch;
  margin: 0 auto;
}

Pro: Works on IE 10 and newer if you use rems
Con: Requires an inner element

Full width background using padding with max()

This article CSS-Tricks however has a brilliant technique using padding and the max() css function which does not require an inner element! This simpler approach is great for component style development.

With the css variables you have a very flexible component that can be resized for various needs.

.wrapper {
  --max-width: 60ch;
  --pad-y: 1rem;  
  --min-gutter: 1rem;
  --bg: lightcoral;
  background: var(--bg);
  padding: var(--pad-y) max(var(--min-gutter), 50vw - var(--max-width) / 2);
}

.wrapper.hero {
--max-width: 100ch;
--min-gutter: 0rem;
--bg: url("hero.jpg") no-repeat cover;
}

Pro: Works without an inner element!
Con: max() does not work with IE11 or earlier.

CSS Flexbox and CSS Grid Wrappers

There are several ways to use CSS Flexbox and CSS Grid for layout — too much to go into in this article honestly. With flexbox you can create multiple columns layouts. With css grid you can create layouts with well grids duh.

One of interesting technique for centered containers is to use css grid with named grid areas. This allows for a single wrapper with the ability to set widths for different types of child content.

.wrapper {
  --gutter-min: 1rem;
  display: grid;
  grid-template-columns: [start] minmax(var(-gutter-min), 1fr) [hero-start] minmax(0, 1fr) [content-start] minmax(30ch, 60ch) [content-end] minmax(0, 1fr) [hero-end] minmax(var(-gutter-min), 1fr) [end]
}

.wrapper > *,
.wrapper > .content {
   grid-column: content-start / content-end;
}

.wrapper > .hero {
   grid-column: hero-start / hero-end;
}

.wrapper > .full-width {
  grid-column: start / end;
}

You can even get really complicated using this technique if you want with 12 column grid style layout as Michelle Barker explains in Super-Powered Grid Components with CSS Custom Properties.

Pro: Very flexible as it's CSS Grid
Cons: Obviously does not work with IE11 or earlier. Requires inner element. Grid does not allow margin collapse.

You can see all these techniques and more on this CodePen!

What centered container techniques do you reach for? Are there any other techniques you've discovered?

(Cover photo by Dan Meyers)