Moons of Saturn: Desktop

[00:00:00]
>> Okay, so we've got one more of these left to go, and that is putting this together this way. And so now we're gonna have our featured card, but instead of having only two cards next to the featured card, we're gonna to have four cards. We're hiding all of our paragraphs of text and we are going to add our buttons here, make sure everything is all lined up and continue on with our headlines there across the bottom.

[00:00:35]
So here we are at 1,000 pixels, make sure your screen is set to at least 1,000 pixels wide. Here we go. And we're ready to add our final set of media queries here to change this to a desktop kind of layout. So I'm going to start by adding my media query at media, min width, 1,000 pixels.

[00:00:59]
And then what I'm going to do is brake all of the stuff that I came before. Remember, in our last media query at 750 pixels, each one of those cards had a separate position inside of the grid system. We had done a whole bunch of overriding that's going on.

[00:01:16]
The first thing I'm going to do is turn all of that off. And the way I'm going to do that is as follows, dot card nth child (2), and then I'm gonna repeat this over and over again. Nth child (3), Nth child(4), And nth child(5). So for all of those particular cards, we are going to do the following.

[00:01:59]
I am going to say my grid template columns is 1fr, 1fr. My grid template rows are subgrid. Our grid column is auto and my grid row is a span 2. And so what that's gonna get us is kind of a mess at the moment. Never panic, we're gonna continue on formatting everything here.

[00:02:33]
So, this just gets our cards sort of generally into the right place. Then we can work on the layout inside of each of those cards. So for my card image, I'm going to say, grid-column, 1/2, and my grid-row, 1/2. For my card text, Display, none. So we wanna have the the text turned off for all of these cards.

[00:03:09]
.Text, there we go, .text, there we go. Then for my card link, I'm going to say grid-column, span 2, and grid row 2/3. So that's where that's gonna be located. Card first child, Grid column, Span 2, and grid row span 4. So that is going to put all of our cards here next to each other, next to that main card, exactly as we wanted.

[00:04:02]
We've still got a couple of issues going on here with the layout and our headlines are all lined up here underneath exactly as we wanted. So that's looking good. For the first child we wanna show its text, so .card, first-child.text, display, block. So that'll bring back our paragraph of information here.

[00:04:30]
And I forgot one style up here at the top, so I've got all of my individual cards, I've got their layout spelled out. The issue that I have right now is I haven't told the h2 where to go, so let's do that up here, .card h2, and that is our grid column 2/3, and our grid row 1/2.

[00:04:51]
Phew, there we go. And so now that I've told the h2 where to go, I've told the image where to go, I told the button where to go, I told the text not to display, and I've got everything running off of the sub grid here. We finally have a layout where everything is all lining up here, and we have our big headlines across the bottom.

[00:05:15]
So now if we were to crunch this up, we'll go back to the previous layout, Crunch it up further, Go to our next layout, and then of course crunch it up even more, and we'll go to our mobile layout. Pretty amazing that that's all one code base, that we have all this content and it's displaying so very differently at all of these different breakpoints.

[00:05:41]
So that is the power of grid. This kind of layout would be very difficult to achieve with Flexbox, it would be impossible to get all of these cards to line up exactly on the same line. Using Flexbox based layouts just wouldn't happen. So this is part of the reason that grid is so powerful and so wonderful for doing page layouts.

[00:06:01]
This is what it was designed to do. And so you can achieve amazing things when working with CSS grid.