0:00 Next, there's a bit more to know about how fractions work. To help me explain this, I'm going to simplify the number of boxes. Let's just go down to three boxes. We'll keep our width. Instead of 90 percent, let's do a known entity like...I don't know. How about 1,000 pixels again? I'm just going to have a single row. I'll comment out grid-template rows for now.

0:23 I have my three elements. Of course, if I make 1fr 1fr 1fr columns, we'll have three evenly sized columns like we see right here. However, if instead I want the middle column to have a defined width of, let's say, 500 pixels. I want it to be 500 pixels no matter what. The behavior here is that the fractions are computed after the 500 pixels has been removed from the available space.

0:50 Fractions are fractions of the available remaining space, not the initial size of the container. As you could see here...Well, you may not be able to see yet. This is, in fact, 500 pixels. If I go to the computer tab in the dev tools, 500 pixels wide. The left and the right, the first and the third boxes, are 250 pixels.

1:13 Both of them add up -- 250 plus 250 -- to be 500, which is the remaining space out of that 1,000 pixels that's left when we subtract this middle column. It's important to understand that order. Anytime there is a length unit, any measurement here that is not a fraction, that space will be allocated first and then the fraction to apply to the remaining space.

1:36 It is not going to compute one fraction and one fraction first and then try and work with 500 pixels. It's the other way around. This is done first. That space is allocated. Then the fractions are computed from whatever's left over.