Check out a free preview of the full CSS In-Depth, v2 course:
The "Display Property" 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 display: grid with grid-template-columns, repeat notation, and fraction units.

Get Unlimited Access Now

Transcript from the "Display Property" Lesson

>> Estelle Weyl: So display property, we show it to you again. So yesterday we discussed flex and inline-flex. Earlier today we did table row and all the table ones, which accounts for almost everything here. And now we're going to cover grid and inline-grid. So, here I just have 12 spans, told them to be pink.

[00:00:26] And they're in line because they're spans. If I say display grid, there we go.
>> Estelle Weyl: Because I did not define the width of any of those. So, each one of those, 1 through 12 became a grid item.
>> Estelle Weyl: If I did inline-grid,
>> Estelle Weyl: It's just the width it needs to be.

[00:00:52] But I didn't actually tell it how wide to make it, so it made each one as narrow as it needed to be, basically width auto of the content. So let's make this look better. Let's actually make it on one line or two lines. So here I have an unordered list.

[00:01:12] And then if I display grid, it did absolutely nothing because those are block level elements, so it's gonna look the same. I need the property of grid template columns to say how wide I want the columns. And basically what I said right here is, I want four columns and then I want them each to be one fr unit.

[00:01:37] An fr unit is a relative unit. It's basically take the free space and give this grid item one unit of that free space. And then it figures out how many units total you have, takes the free space and it divides it among all the units. So let's take this line right here, and move it back to this one, right?

>> Estelle Weyl: So you can have a grid that way. So before, because I did not have grid template column, it just assumed I wanted one cell on each row. I have to explicitly tell it that I want more than one. And I use this thing called repeat. It basically says repeat four times 1fr unit.

[00:02:31] I could have also written 1fr, 1fr, 1fr, 1fr. And that's the exact same thing. Or I could have mixed the units and said 200 pixels. Let me make that 400 pixels. So, you can actually see a difference. Okay, and then the other thing I want to do, on this one, is list style none.

[00:03:00] So that way it's not ugly. So even though it's displayed as a grid item, it doesn't lose the fact that it's a list item.
>> Estelle Weyl: It just doesn't display it as a block. It gridify's it. But it doesn't, you actually have to tell it that it shouldn't have a list style.