My fluid website layout

With the start of this site, I implemented a viewport-based layout without a max-width declaration. That means, the width of my main page’s container is always variable and always based on the size of the screen it’s viewed on.

In my case, I’m using a vmin CSS value – which is the smaller value out of viewport-width and -height – to set both the font size and the width of the main container:

body {
  font-size: calc(1em + 0.9vmin);
  line-height: 1.65;
}
main {
  margin: 1.5em auto;
  width: 96vmin;
}

This makes the site always proportionate to the viewport, no matter how big or small.

Using the vmin unit – as opposed to pure width-based CSS units like vw or % – is crucial, so that the container won’t grow uncomfortably wide. Because that would make the page very hard to read on wide screens.

This approach contrasts the (I think) more common max-width-based layouts, which I used to use in the past (for my old blog for example):

body {
  font-size: calc(1em + 0.7vw); /* see, I'm using vw here */
}

@media (min-width: 701px) {
  body {
    font-size: 1.306em; /* make font-size match the max-width of main */
  }
}

main {
  max-width: 700px;  
}

Advantages

This approach I think has two main advantages over limiting the container’s width:

1. The content width always adopts to the screen size. For screens small and big.
2. The font size can always be proportional to its container’s size.

And this overall makes for easier maintainability and adaptability.

Let’s explore those in more detail:

1. Container width always adopts to screen size

Making the main content’s container based on a vmin value, it will keep growing organically, no matter how big the screen gets.

Instead of utilising a fixed width – using max-width for example – a vmin-based layout will keep growing without the need for additional media query break points. It will simply grow or shrink automatically based on the viewport’s aspect ratio. No matter how small or big the screen its viewed on is¹.

2. Font size is always proportional

When the content’s container grows organically, we need to make sure our font size remains proportionate to that container width.

I complained before, that when using a max-width on the main content’s container, the font size needs a maximum, too. I could use the clamp property for this but it’s currently still not very widely supported. Although this will change for the better, simply factoring in vmin for the font size, means I neither need to wait nor worry: text will always look right.

The exact calculation I’m using – font-size: calc(1em + 0.9vmin); – is not so important. Important is only that vmin is factored in, so that the font size remains proportionate to its – also vmin-based – container width.

So this basically gives me a container-based font-size.

Two disadvantages

I can think of two general disadvantages:

1. In landscape orientation on screens with a more extreme aspect ratio², the container width looks unnecessarily narrow.
2. Images need to be large enough to look ok no matter the container width.

Number 1., I personally simply accept. And to deal with number 2., I use responsive images: I generate multiple sizes of the same picture and let the browser select which one is appropriate for the given screen and container size.

Summary

Overall, I’m very pleased with this approach so far. Makes for a simple, easy–to-maintain fluid layout.