Description Lists & CSS Grid

[00:00:00]
>> So here on my div instead of making this with a Flexbox, let's set this instead to display grid and we're gonna give this grid template columns 2fr, 2fr, 3fr, so they give us a little bit more space there, we can give this a little bit of margin 1rem, Flex flow row wrap that's gonna go away, We've got our border on the bottom, we've got some padding, it's looking good.

[00:00:49]
Okay, so now I have grid going on here. And what I wanna have is all of my dts to wind up on the left. I want all of my dts to wind up over on the right. How might we go about doing that? You may have any grid experts here.

[00:01:06]
How might we go about doing that? Putting all of the dts on the left and the dds over on the right. So one of the things that we could do here, Were reset my dd to auto. And for my dt, what I'm going to do is, set this to grid-column-start of one.

[00:01:31]
So all of the dts will start on the left hand side and then for my dds will say grid-column-start what. Two, right, that pushes everybody over to the second column. How cool is that? And if you're not sure what's going on, you can't see it. You can't style it, you can always put a border on it.

[00:02:08]
One pixel solid red on the dd. One pixel border, one pixel dotted blue on the dt and that will help you better visualize what's going on, right? So if you wanna go back to the Demo CodePen here, it's probably the easiest thing to do. We can now test the rest of this list.

[00:02:34]
So if you go back to our disgusting, revolting, inedible lima beans, not that I have an opinion on them. Or yummy more please avocado, green grown, garden grown tomatoes, sugar snap peas. We can copy all those divs and we can drop them into the list that we're working on here and you see that now we have new issues right It worked great for our first two where we had a one to one relationship work great where we had 1dt too many dds.

[00:03:15]
But what's happening when we get too many dts, but not necessarily many dds. Or they're mismatched in terms of their numbers. Anyone have any ideas of what we could do here, or what is happening? Why is this happening? Anyone have any idea why this is happening?
>> The dds are aligning to the last dt.

[00:03:39]
>> Correct the the dds are aligning to the last dt.
>> Why is that? No idea. Okay, so what's going on here is this is grid, grid tries really hard to guess what you have in mind, right? So grid knows that it's gonna put all the details over on the left, so there it is chunk, chunk, chunk.

[00:04:00]
Puts up on the left, we get to the last one and it goes, okay, now we have a dd I'm gonna put it right next to that last one and then keep stacking them in on the dds. So how can we push that back up to the top, which is what we really want?

[00:04:14]
Any ideas?
>> With grid rows perhaps.
>> With grid rows, what a great idea. So yeah, that is the answer.
>> And here is the trick to this. If we put this on the dd, right, and I said, grid hyphen row, hyphen start of 1, what's gonna happen?

[00:04:40]
No, it did exactly what we told it to do. Dang it, I hate when that happens. Okay, so here we have told every gd to start at the first row, which is exactly what it will do because grid will allow for overlapping cells. So now we've just stacked all of our text on top of each other.

[00:04:58]
So that's not really what we want, we need to be a little bit more specific about what we really want. What would make this work? We need something like dd first-child, right? Something like that, problem is that doesn't work either. Now why doesn't that work? Any ideas online?

[00:05:22]
>> We're targeting the children of the dd but we want to target the dd.
>> You're getting close, we've said dd first child, but it doesn't work. Where is the first child dd in this HTML? There isn't one because the first child would have to be here, right?

[00:05:42]
This would have to be our first child. That is a first child. We don't have that, what we have instead is, we have a dd it's down here. It is called a first of type. Okay, first of type. And that will make this work. So that is the difference between first child and child last child all those happy things.

[00:06:09]
And the of-types, which by the way all of those exist. First-of-type, last-of-type, only-of-type, end-of-type with all of the caveats and last-of-type, all of those exist. They're either children or they're of types and they work exactly the same way. This is the difference, it's not the first child it's the first of its type.

[00:06:32]
And once we do that, then we set our first dd to show up there at the top of the column and all of the other dds will fill in here underneath. So we wind up with what exactly we're looking for, and it looks way prettier if you get rid of their borders.

[00:06:50]
I know you'll be shocked. Those are not attractive. Although they are very useful. Okay, kind of nice? We could tighten that up a little bit more. We could push it a little further with design, we can do all kinds of crazy things whereas one of the things we could do we could stripe it, right?

[00:07:18]
Div:nth-child(even), Background-color, light gray doesn't quite line up with our border. I think I've got a margin in there somewhere, or a padding or something. We'll see, I've got a margin on my, I've got a margin on my dev, if I change that to a padding Then that will tighten up nicely.

[00:07:56]
>> On chat people saying dropping knowledge bombs.
>> [LAUGH]
>> Mind exploding emoji.
>> Awesome, that's what I like to hear. This is so much fun, isn't it? Anytime you have these parents and children and these relationships you can apply Flexbox, you can apply grid, you can do cool kinds of styling like this.

[00:08:17]
And we do it because we have the semantic HTML to work with. We could do this with 27 layers of divs, it just gets way more complicated than we have to drop in all the classes that go with it here. We're just working with the patterns that we have.

[00:08:30]
This is a very cool trick. So yeah, feel free to use that on your next website. Now you're gonna look for excuses to use description lists, and that would make me very happy.