Moons of Saturn: Adding a Media Query

[00:00:00]
>> All right, so let's move on then. The next thing you wanna code is the very first breakpoint. This is for sizes of the screen that are 500 pixels wide and larger. This is how it's going to look. So remember, what we're going to have to do is we're gonna have to think about how we're going to make changes from our mobile design into our first breakpoint here.

[00:00:23]
We now have two grid systems going on, we have one within each card. And we have one to lay all of the cards out on the page. So we've got, our featured card at the top looks pretty much like it did before. We have our individual cards inside of this.

[00:00:40]
And a little subtle change here before the image had gone all the way down the screen. Now the image is even with the headline, and then we have our headlines down here underneath. So I hope you all did okay on this very first media query that we have here inside of our layout.

[00:01:03]
Make sure, first of all, that you have made your screen large enough to see your changes. That's always the first error that's very easy to make. If you have your screen set too small, it will, quote, nothing will work. And that can be very frustrating. So make sure that you've got your screen just slightly larger than your media query.

[00:01:24]
And then we'll start coding. So what is the first thing that I need here on the page? @media, and that'll be what?
>> Min-width 500px?
>> Min-width 500px, awesome, all right. So I've got this media query, I'm gonna try to lay my cards out on the page. If I go back and take a look at my HTML, I have five articles, but they have no parents.

[00:01:57]
That means they're very unruly children, yes? So what do we need to do?
>> Wrap it in a div.
>> Let's wrap it in a div and give them a parent and get some order in their lives. So I'm gonna call this div with a class of, you could call it anything you want, I called mine photo-cards because that's what's inside of this.

[00:02:21]
You might have called this grid-container or any one of a number of other things you could have called it. So now I have my parents and children. If you don't have the HTML structure of parents and children, grid is never gonna work for you, by the way, and neither is flexbox.

[00:02:38]
You gotta have parents and children in order for this stuff to work. All right, so now that we have that in place, then we can say that our class of photo-cards, We're ready to go here for the layout. So what is the first thing that I could put in here?

[00:02:58]
>> display: grid?
>> display: grid, great, and then I need what?
>> grid-template-column?
>> grid-template-columns, and what are those gonna be?
>> 1fr 1fr?
>> 1fr 1fr, okay, and then I'm going to also have some rows. You can put these in, you might not put these in, I'm gonna put mine in grid-template-rows.

[00:03:27]
And this is gonna be auto 1fr auto. Okay, then I need to lay out my actual cards themselves. And for the most part, my cards are in good shape here. This is pretty much the layout that I wanted for my cards, okay? So what I'm going to do is, for my first card, .card:first-child, or you can continue on with your first-of-type, because that'll select it, either way.

[00:04:03]
I am going to say, my grid-column, Is gonna be what?
>> 1/3?
>> 1/3, because we want this to span across both of those columns. And then we're going to have all of our other cards that are here underneath, okay? There's actually nothing to do with the additional items that are down here on the bottom.

[00:04:31]
So this is pretty much the way that this is going to look for now. The last thing you might wanna add are some of those extra gray lines that go around this, okay? So we have some extra gray lines that go around this here. And we can add those by saying something like our .card.

[00:04:52]
And we could say something like a border: 1px solid #ccc, that's gonna give us those borders here around our cards, okay? We could also do something like border-right. That generally works too. If we just put it on the right side, then we're not duplicating all of our borders.

[00:05:23]
And we don't actually need to turn anything off when we get up here to the top, so both of those answers work. Okay, so this would be the basic solution to this particular part of the puzzle. Is there any questions on the basic layout here? All right, so this is like the bread and butter of what we covered yesterday, this basic stuff here.

[00:05:50]
Now, if you take a look at the design itself, notice that we have our headlines and our images and our text and our buttons are all lined up together so beautifully. Whereas inside of our layout here, well, our buttons are a little bit askew, yeah? And sometimes we have big gaps and all kinds of other weird things that are going on here, okay?

[00:06:18]
So, does anyone know what the solution might be to get all of these things to line up across the cards?
>> Subgrid.
>> Subgrid, yes, subgrid is brand new. Just got started supported in browsers like in September, but it is supported. Okay, so if we were gonna go about applying subgrid to this particular page, let's walk through what that would look like.

[00:06:46]
So in my card style here, what I'm going to add to this is the following. I'm gonna say my grid-template-columns, I guess I changed this a little bit, 2fr to 1fr, I've made the image just a little bit bigger, so there we go. And then the important part here is grid-template-rows subgrid, okay.

[00:07:18]
So remember what subgrid means? It means latch on to the parent's layout in terms of its grid system. And so right now, our parent has three rows here, auto 1fr auto. And so our children, all of these cards, they have latched on to that system. And they have put all of their content all in the same row.

[00:07:43]
All right on top of each other. Not really what we want, but that's what's going on. So now we can detangle all of that, and then things are gonna line up correctly with the underlying grid system. Okay, so card, .text, that's the paragraph of information. We can say grid-column: 1/3, and we can say grid-row: 2/3.

[00:08:14]
We want that in the second row of the design.
>> All right, this is still min-width: 500?
>> Yep, this is all still the min-width of 500, yep.
>> Can you remind me, min-width, it's referring to everything 500 and above?
>> 500 and above, correct. And the styles from mobile are still carrying into this, but we're overriding some things as we go, yeah?

[00:08:44]
Okay, card .text, and then we have .card .link, we're gonna tell it where to go, grid-column: 1/3. So we want it to stretch all the way across.
>> It's a little overlap here, it's happening there, too.
>> Yep, they're all stacked on top of each other, never panic.

[00:09:14]
Okay, there's my error, okay. And then each individual card also, we need to tell it to span across three rows of the parent. That's why everything's on top of each other right now, because each card is taking up one row. We want each card to take up three rows, so we're going to say, grid-row: span 3, there we go.

[00:09:38]
So now each card is taking up three of the rows, as the parent would, the parent's rows were auto 1fr auto. And so now we have auto 1fr auto for our layout here. And you can see that our second row of cards are lined up so pretty. And as well as the first row.

[00:10:03]
Why is the second row, why are those cards taller?
>> The left one has so much more text than the right.
>> Yeah, exactly, there's so much more text there under Phoebe than there is under Iapetus, I think is how you pronounce it, I could be wrong, okay, cool.

[00:10:25]
And I think we have all of the borders in place. All right, so I think that's everything, we've got all of the stuff now. Any questions on that particular layout? So we incorporated subgrid here, and subgrid, if you like the way your cards look when things aren't exactly perfectly lined up, that is fine, you can continue to lay your cards out that way.

[00:10:51]
And in fact, you'd get that same kind of effect with flexbox. For this concept of subgrid is what will allow you to align elements within cards and across cards, rather than just within the individual card itself. And it will give you that, I think, a slightly more polished look.

[00:11:09]
So that is the benefit of using subgrid in this particular example.