Gone Are The Pixel-Perfect Days — An In-Depth Look at Using CSS Grid’s Fractional Units In Combination with Flex Content

How I learned to use the CSS grid’s FR-units (fractional units) to become lightning-fast at planning original website layouts using creativity and imagination and not a single pixel in mind!

You can Follow me on Twitter to get tutorials, JavaScript tips, etc.

Thinking in pixels is not natural. Good news is that it is no longer relevant.

Fractional Units

The idea behind fr units is simple. They divide space into blocks relative to one another. Your sidebar can be 3fr or 4fr whereas the main area 10fr. They provide a measurement unit for naturally dividing space.

The single 1fr unit divides columns into space of equal measure:

Using different scale:

And with gaps… space is calculated automatically.

The best feature of fractional units is that they work vertically too…

Of course it is only subjectively “best” feature because no other CSS property/value combination is capable of specifying vertical space in fractional units. And because often vertical space is usually expanded automatically by height of the content itself. Keep that in mind.

And yes, you can also align content vertically by treating inner cell as flex…

The red dots here are flex elements inside the cell.

Vertical align is achieved by treating grid items as flex. I tried other pure grid approaches — incl. nested grids — but they don’t work well. This will do:

And to create the red dots all I did was add blocking <div>s inside the <section> (grid’s item) and changed their look to rounded corners.

This is for demonstration only. Of course, you would replace the dots with actual content. It’s just easier to see how the grid + flex align items in general.

So you might think at this point. OK, cute diagrams! But how do we actually build websites with this?

One Possible Approach To Creating Layouts Using Fractional Units

CSS Grid helps you solve vertical and horizontal problem of layout design without ever touching pixel values.

The key idea is you want to use CSS grid as the main scaffold for your entire site’s layout. And implement flex in cells or as their content in a practical way depending on the dimensions of your content.

To get started you usually create a scaffold draft it’s kind of like initial layout sketch. Probably after working it out on a sheet of paper or in your head.

1. Solving The Vertical Layout Problem

First, I start with this lane configuration. The left hand side is naturally a navigation bar (4fr or so) & 3 flex dots are inside the 10fr main content area.

Red dots demonstrate flex item behavior inside grid cells when grid is resized. Each one is simply a <div style = “flex: grid”> (see other styles below.)

I should point out here that .item here (the red dots) isn’t referring to grid’s cell, but rather content child inside the cell. However, there are situations where you will find turning the cell itself into flex useful as well.

The code for the lanes is simple — it looks like this:

This is probably as simple as you can get. I want to keep the CSS grid as minimalist as possible so it doesn’t clutter the main point of this tutorial.

Your project might demand a different vertical cut. If so, go for it.

2. Solving The Horizontal Layout Problem

For complex websites with varying type of content (article, followed by product display, followed by comments, etc.) you want to split your CSS grid horizontally as well.

Simply go down the vertical lanes we already created and determine how much space you need to allocate for each type of content to be placed there and specify that using the grid-template-rows property.

Vertical space is determined by length of content.

It doesn’t matter whether you use fr or pixel units. I would use pixel values for headers and footers because they are usually fixed height.

It Can Be Done In Combination With Flex.

For inner content in simple layouts like the one in this tutorial, we don’t even need to solve the horizontal problem using the grid itself. We can and probably should do it with flex.

This is where many designers will make different choices. Some will stick to the “pure” css grid approach (but it’s much more difficult). Others will mix it with flex (which is what I recommend.)

Most designers agree at this point that using flex as the grid’s cell or inside the cell as its content list is ideal. In my own experience using grid for everything or using flex for everything makes rigid and restricted layouts.

Where you are going to take this concept is up to you. I don’t know whether you’re crafting an image gallery or some other type of a website.

I can’t seem to suggest a specific design pattern here, because that might be devastating to your own creativity :)

But to get you an idea of how flex behaves inside dynamic CSS grid, I created this animation that will be far more useful in demonstrating the prinicple:

Knowing this, would you really want to create a bunch of smaller cells and mess with CSS grid’s templates when you can use flex?

Flex Direction and overflow:hidden

When overflow:hidden is present the overflow effect on flex items is only one-dimensional. Here is example with default flex-direction: row;

The 3 flex items in main content area only squish when I add overflow: hidden which seems like the opposite effect of what I’d expect it to do.

This happens because flex overrides overflow:hidden in the opposite direction of its flow.

Here is another example. This time I set flex-direction: column;

There is still overflow, only in one dimension. Opposite of flex direction flow!

This happens because by design flex wouldn’t be able to “flex” if its content was overflowing. Stretching elements naturally requires a notion of a fixed size. So overflow:hidden will still work — just not in the direction your elements are flexing :) You can say flex direction overrides overflow property.

Truth is stranger than fiction. When I *remove* overflow: hidden & size of content is >= container size, it will actually overflow. But… when I add overflow: hidden back, the flex elements start to shrink properly.

Does anyone know why this happens ^^^ ?

I fail to wrap around that logic.

However, in my experiments the following examples worked without a hitch!

(Meaning, when content was way smaller than the container)

You can take just these few principles above to build a decent layout.

Flex For Everything?

And finally… I get a lot of people tell me they use flex for everything. And feel kind of intimidated by the vast possibilities of grid’s properties.

So…should you use grid or flex?

Perhaps if your site largely depends on square cells equally spread across the entire area… you could then use css grid to build out the scaffold. Still, it’s difficult to get away with css grid-only design. Use flex inside the grid either as the grid’s cell itself or its inner content. This setup works & works well.

In Conclusion.

  • CSS grid was not created to force you into a single design philosophy.
  • CSS grid was made to complement Flex, not replace it.
  • Use flex’s justify-content and align-items to center your content.

Having said this, you really just have to get creative based on what type of content you want to display inside your primary grid scaffold.

I hope that this tutorial was insightful in any way.

If you wish to support my work CSS Visual Dictionary is my book.

Grab a Copy of CSS Visual Dictionary (“Tesla” Book)

Look Inside:

CSS Visual Dictionary. Most of the diagrams from this tutorial were influenced by the manuscript.

It was published by Learning Curve — a small independent book publishing company.

Follow Me On Social Networks

You can, on Twitter for occasional weekend PDF giveaways.

Follow me on Instagram for a quick hit of JavaScript.

You can follow me on Facebook for free coding stuff.

If you wish to support my work CSS Visual Dictionary is my book.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store