The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Grid Layout 213

Figure 17-3: A 3×3 explicit grid (lines and numbers added for clarity)

frACTionS vS. PerCenTAGeS

When used on their own, percentages and fractions are interchangeable.

For example, in this code, the two rules have the same result:

E { width: 50% 50%; }

F { width: 1fr 1fr; }

Where they differ is when they are mixed with length units such as px

or em. Say you have a grid with one 15em column and you want to fill the

remaining space with two equally sized columns. With percentages, you can’t

really do this, unless you know the width of the container and are happy to

perform some complex calculations. You might think you could use calc()

(see Chapter 16) to do this:

E { grid-template-columns: 15em calc(50% - 7.5em) calc(50% - 7.5em); }

But the spec isn’t clear if calc() is permitted, and no current grid imple-

mentations (at the time of writing) allow you to do this.

In these cases, fractions prove more useful than percentages. When you

recall that a grid fraction, or fr, sets aside an equal share of any space yet

to be distributed, the fraction-based code you would use for this example

becomes clear:

E { grid-template-columns: 15em 1fr 1fr; }

Here, any undistributed width in the grid will be divided into two equally

sized columns.

Although, at times, you may be able to use percentages easily in your

grids, fractions keep things simple.