CSS In-Depth, v2 CSS In-Depth, v2

Fraction Unit & Repeat Notation

Check out a free preview of the full CSS In-Depth, v2 course:
The "Fraction Unit & Repeat Notation" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle demos using repeat() notation and fr units, as well as covers the ability to use minimums and maximums.

Get Unlimited Access Now

Transcript from the "Fraction Unit & Repeat Notation" Lesson

[00:00:03]
>> Estelle Weyl: So, here, I have a more complicated grid. And it says, grid-template-column: repeat twice, 2 frs, then repeat 3 times, 1 fr. So, column three, four and five, are half the width of one and two. And column six is 3frs. And then grid template row, the first one is 2frs, and then the second one is 125.

[00:00:34] These are both 4 ems, and these are not declared. So why is row number one, so tiny? Anyone have a guess? I had no free space. So it made it fr is basically zero. I could have made this, but these list lines aren't actually declared. I could have actually said 6fr.

[00:01:08]
>> Estelle Weyl: So you have 2fr, 125, 4em, 4em, and 6fr. So my fr was basically tiny, it was a few pixels. It's the free space, that's right there.
>> Estelle Weyl: So, like 2 pixels.
>> Estelle Weyl: Let's make it 5.
>> Estelle Weyl: 4,
>> Estelle Weyl: 3, doesn't look very good when I do that so I should make it, okay.

[00:01:41] Okay, so fr is the term is actually fraction unit. And it just describes a fraction of the available space. So that's that extra space within the height in that case, or the width that can be divided equally, based on how much space is available. And then the repeat, I think, you have a good understanding of what the repeat is.

[00:02:05] So let's go back here, and I'm going to give you 2 minutes to just play with it and write your own widths and heights.
>> Estelle Weyl: So the thing is keep playing with it, but grid template columns and grid template rows, that's one of those things that you're never gonna remember how to write that, but at least now you know what it is so you can look it up.

[00:02:40] I still look it up every single time.
>> Estelle Weyl: That's why I kept copying and pasting it, cuz I'm kinda like, it doesn't work. The other thing that's really important, is the fact that you can mix the unit. So if you want your aside to be 200 pixels, and your nav on the other side to be 200 pixels, and the thing in the middle to be whatever size it needs to be, you can say a min of something and 1 fr.

[00:03:15] So basically take up all the free space but at least something wide.
>> Estelle Weyl: So here, I actually added, we're gonna cover this in a second. I added the min and max for the last column.
>> Estelle Weyl: And here, what I did is I made it wider than the window.

[00:04:43] I basically said, I want the first two to be 200 pixels, this next three to be 150 pixels, then that just didn't fit on the screen. And then the last one either to be a minimum or maximum of 10 pixels. So it's gonna be of minimum of 10 pixels.

[00:05:00] But I could say a minimum of 100 pixels, and a maximum of 1fr. And if I don't have any fr units, right? Fr is 0, it's gonna make it a 100 pixels. Okay, so let's continue. So as you saw we've been using some different units for those widths.

[00:05:20] Generally, we use the fr unit, and the length of percentage. But you can say max-content, which is in flex-box and in grid, and everything. Your element has content in it. Right now, we just have the number 1, so max-content and min-content, it's just tiny. But it could be relative to the content or it can be minmax, which is the size between the min, if max is less then min, then max is ignored.

[00:05:55] And minmax is treated as min. Or it could be auto, and lets go and add auto or it could be fit content., which is basically a calculation of the content, the length, or the percentage. So if we just do here, auto, it basically says, I only need to be the size of the text.

[00:06:18] But if I do li:first-of-type, or I can just do first-child shorter. And I do before.
>> Estelle Weyl: Content.
>> Estelle Weyl: Auto became much bigger, right? Because I have content in there.