Three Column Card Layout Exercise

[00:00:00]
>> All right, so I wanna give you guys a try at the next one. So we are gonna go from this design, we just coded it, right? Where we have our featured layout here going across two columns. We have all of those cards underneath of it. When we get to 700 pixels, you have your featured cards stretching across, now, three columns.

[00:00:24]
Okay, with the big picture and the headings and so forth underneath. So take five minutes, see if you can do this yourself. This is gonna come, we have our 500 pixel media query. So after this, you're gonna continue to type code. You're gonna need to write a media query for 700 pixels.

[00:00:42]
And then you're gonna need to make the changes in order to make this go to three columns. And remember, you'll want to make sure that your window is big enough to see your changes. So make sure that it's over 700 pixels wide. Tell me what I need to type here.

[00:00:59]
Let's go through an answer here. So what do I need to put in in order to make the three columns underneath my featured image? What am I gonna put in, @media?
>> @media, I was looking into the collapse, and that was already written.
>> That's okay, no worries.

[00:01:12]
>> [LAUGH]
>> @media (min-width: 700px), yeah, okay? Then you were saying card-container.
>> Yep, display a grid with three columns, grid-template-column, 1fr, 1fr, 1fr.
>> Okay, grid-template-columns, and just for fun, I'll say repeat(3, 1fr). If you said 1fr, 1fr, 1fr, that totally works. That's not a bad look right there.

[00:01:42]
Yeah, it's kind of cool, but it's not what the designer wanted. So what else did did you say, James?
>> I have the feature grid-column go from 1 to 4.
>> Yeah, feature {grid-column: 1/4;}. Hey, look at that. And if we scroll down, there we go. There's our three cards going underneath, nice.

[00:02:11]
Again, we'll address the alignment issues later. But for right now, we are absolutely fantastic. Technically speaking, right here inside of the card-container, the display: grid, we actually don't need that. And the reason why is because we've said display: grid up here at the 500 pixel media query. So that will carry over into the 700 pixel media query.

[00:02:33]
We can just indicate what has changed in this particular case, all right? But if you say display: grid again, it is not the end of the world, it's just fine,