The behavior changes but 1fr remains the same regardless whenever different values are used. Fractional units work similar to % values but they are easier and more intuitive to divide space with:

Behavior of fractional units (fr unit) changes based on all values provided in either dimension.

In this example only column-wise behavior is shown for simplicity’s sake. But it works the same for rows too. Simply use grid-template-rows property.

Fractional Units And Their Relationship To Gaps

Space defined using fractional units changes based on gaps. The same 1fr within the same parent will shrink to a smaller size when gaps are added:

Here we added gaps to cells specified using fr units.

As you can see, this gives you a pretty good set of properties to space content basically in any way you wish without worrying about pixel values.

These new dynamics render pixel-perfect design as a thing of the past. We will now think about layout design using the intuitive approach!

Finally, to give you a better idea of using non-whole fractional units here is a fun grid I created. You can specify them using floating point numbers too:

Content Placement

We’ve just dissected the CSS grid anatomy. Hopefully you get a better idea of how CSS grid structures content. But now we need to get creative and actually place some items inside it. How it’s done might modify default behavior of the CSS grid. We’ll explore how this happens in this section.

To arrange your items across cells or template areas on the grid you will refer to them by lines between cells. Not <table>-like spans.

CSS grid does allow using spans for determining width and height of the content area (in cell space) just like tables. We’ll explore that in just a bit. But you still can and probably should specify the starting cell using line numbers or named lines (more on this in a bit.) This depends on your preference..

As far as content placement across multiple cells goes the most obvious and tempting thing is cell spanning.

Cell Content Spanning

You can span an item across multiple cells.

Important: Spanning changes location of the surrounding items.

Spanning using grid-column and grid-row

Using grid-column and grid-row properties on the item element itself: