0:00 Next up, I'm going to show you another unit called the fraction that is really useful in the world of grid. The concept here is that 1fr, we write fr instead of the word fraction, but it stands for a fraction, is equal to one part of the available space.

0:16 In this case, I want one column that will basically take up all the available space. It's not going to look like much. There it is, single column, all the way across.

0:26 However, if I have two columns of 1fr, they are each one fraction of the available space. Meaning, they'll split the space. In this case 50/50. There we go, 50/50. Ignore the row for now. We're not worrying about these rows. I'm just working with columns.

0:45 As soon as I add another fraction, one fraction, one fraction, one fraction, three columns, equally sized. I don't have to specify the 33.33 percent, but that's what they'll end up being. Each one will be 33 and a third percent of the overall parent. This is all just with 1fr.

1:04 If I wanted six, for example, six evenly sized columns, I could do this, 1fr x six. Here we go. They're all the same width, but they don't have to be the same width. If I want the middle to have a double wide column, I can use two fractions.

1:21 It takes all the available space and it will divide it into the appropriate number of columns, where the first two on the left take up one fraction, the middle column takes up twice as much, and then the two on the right, take up one fraction.

1:37 In this case, it takes the overall space, that's available, it divides it into six individual pieces, and it assigns two of them to the middle column. Then 1fr, 1fr, and 1fr, 1fr on the right, this is what we end up with. This one is twice as wide as the ones on the left and the right.

1:55 Fractions are very useful. You could use percentages here, but you're going to have to do the math to figure out what percentage is this one compared to this one. It just gets tricky. Fractions make it a lot easier.

2:07 The same would apply for rows. Let me just rewrite this to have two evenly sized rows. There we are, 1fr, 1fr. If I want the second row to be twice as large, there we go. This one gets twice the amount of available space as a fraction than the top row does.

2:27 I'll just prove that using the DevTools. If we look at, let's say this top one here. If we look at its height, its 333.3 pixels. If we look at the one below it, it's 666.6 pixels. Twice as tall as the one above it, but I didn't specify those dimensions exactly. I just said, I want a row that's one fraction and another row that's two fractions.