A few flavors of container

Container classes have barely changed since Bootstrap popularized them over a decade ago: set a max-width, add auto margins, maybe some padding. It works, so why mess with it?

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

Flavor 1: CSS Grid

Kevin Powell is one of a few people who I’ve seen show any kind of innovation for container styles. His implementation uses css grid. While maybe a little complex, it does allow for a few flavors of containing elements.

Flavor 2: Using min()

After working at Opal Camera, Aristide Benoist introduced me to another flavor of container. This one is pretty interesting. Not only is this restricting the width, it’s also adding padding — all in one calc!

.wrap-ml {
  --wrap-width: min(1600px, calc(100% - 16px * 2));
  width: var(--wrap-width);
  margin: 0 auto;
}

This took me a bit to wrap my head around — but the magic is all in the --wrap-width variable. The first value you pass to min() is the desired container size. The desired padding can also be changed in the calc() from 16px to whatever you’d like.

Here’s what happens at different viewport widths:

Above 1632px: The min() returns 1600px because 1600px < calc(100% - 32px). Since we’re at 1632px and using margin: auto, there’s going to be 16px of padding distributed on both sides.

Below 1632px: The min() returns calc(100% - 32px) because the viewport is now narrower than the desired container width plus gutters. This automatically maintains 16px gutters on both sides while the container shrinks proportionally with the viewport.

Flavor 3: padding-left and max()

If we want a full width background while containing the content to a certain width, we do achieve it using padding-left with a calc() and max(). The max() will make sure we always have at least 16px of padding on the left. The calc() will calculate the amount of “margin” we will need to push over the content to the desired container size.

.full-width-bg {
  padding-left: max(16px, calc(((100% - 800px) / 2) + 16px));
  padding-right: 16px;
}

There are so many ways to do containers in css. As I’m researching for this post, I’m seeing yet another flavor using container units (which I didn’t even know existed):

https://piccalil.li/blog/building-a-breakout-element-with-container-units/

Hope this was helpful. Bye, yall.