Multiple CSS Approaches to Responsive Width Centered Containers
Tags: css, layout
Published: 2021-02-18 23:07:45

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](https://typographica.org/typography-books/the-elements-of-typographic-style-4th-edition/) 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?](https://meyerweb.com/eric/thoughts/2018/06/28/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](https://css-tricks.com/using-max-for-an-inner-element-max-width/) 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](https://css-tricks.com/super-power-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](https://codepen.io/colinaut/pen/OJbgQrK)!

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

*(Cover photo by [Dan Meyers](https://unsplash.com/@dmey503?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText))*