Mobile-First Layouts with Grid

[00:00:00]
>> Great, so welcome to chapter 7 and we are fortunate enough to have been hired by NASA to do some layouts for their website. How cool is that? My goodness, we're so excited. So we are going to work on writing some mobile-first media queries, working with Grid. So basically, we're gonna put together everything that we've learned up to this point in time to work through this example.

[00:00:23]
And the graphic designer has given us the layouts and how they should look. So if you look first in the column here where it says less than 500 pixels. So less than 500 pixels, in other words, mobile dimensions, this is the way the page is gonna look. It's gonna say planets and moons, we're gonna have this amazing picture of the solar system, and then we're gonna have a series of items underneath of these various planets with their moons, all the way down.

[00:00:49]
We've got Earth, Mars, Jupiter, Saturn, Neptune and Pluto. Okay, then over between 500 and 699 pixels, they want it to look like this. So we're gonna change the way things look. We're going to stack our headline image and button here this way, okay? And make a column of two going on down the page.

[00:01:11]
Make sense? Then when we get to 700 to 899 pixels, once again, we've still got our leading featured image here, and then underneath, we'll have three items going across, okay? Sharp-eyed graphic designers will immediately notice the following. You'll notice that it says Earth and Moon on one line, but Mars, Phobos, and Deimos wraps onto a second line and it doesn't line up perfectly.

[00:01:37]
File that away for the moment, we'll get to fixing that in chapter 9 with sub Grid. For right now, this is the way it's going to be built, okay? And then finally, when we get to desktop, we get this lovely layout. So we're going to have our big featured item here, and then we'll have our card sort of going around that featured item, a whole bunch of different columns and rows.

[00:02:03]
Super cool? Okay, so we're gonna use four min-width media queries, those will be at 500, 700, 900 pixels. And we start, of course, with our mobile layout. Make sense? So if you open up you be getting CodePen there, let's take a look at what we have for starting code.

[00:02:24]
So what we've got going on here is we have a series of divs, and once again, I'm gonna fold up my HTML here. I find this a useful approach when thinking about layouts. So my first div has a class of feature and card, this is my big solar system item here.

[00:02:45]
Okay, so that is both the featured item and a card, and then all of the other items after that, they are cards. So those cards consist of, if we were to open one up, they consist of an H2, that would be the In the title here, it would consist of a very cool image.

[00:03:02]
I love this image, that is, of course, the moon orbiting the Earth, and that's the dark side of the Moon right there. And then after that, we have a button here where we can learn more at NASA. If you click that, you'll go to the page that produced this picture, okay?

[00:03:19]
The featured one's slightly different in that it has our H2, our image, it has a paragraph of text, and then it has its button, because it's a feature. So it's got a little bit more information on it, okay? So it's always good to just go through and review that HTML.

[00:03:35]
So one of the things we know, if we take a look at our layout here, ignore the featured item for the moment. Let's just take a look at what we have for each one of the cards underneath. So can anybody make a comment about how we might go about laying out one of those cards?

[00:03:53]
What's going on?
>> We have two columns.
>> We have two columns, exactly. So in column one, we've got what?
>> Name and the button.
>> We have the name and the button. So in column number one, we're gonna have the name, that's this H2, and we're gonna have the button, that's this paragraph with the button inside of it, right?

[00:04:20]
And then in the second column we're going to have the image. So what we have to do then, if we think about that we have the H2, we've got to put that over on the left column, we've got the image, we have to put that in the right column.

[00:04:35]
And then the button we have to put over in the left column. Okay, so let's worry about coding that first. Sometimes the problem with doing these kinds of layouts is figuring out what to code first, and so I am just gonna start by coding all of those cards because that's a pretty straightforward thing.

[00:04:51]
And I think that's gonna get me to most of the way through this particular problem. Once we have the card in place, then we can take a look at this featured item up here at the top, right, which is a little bit different. Make sense? Okay, so let's start by coding those cards.

[00:05:12]
Down here in our CSS, you'll see that I have included a few little bits of styling here for you. So first of all, we have this HTML, box-sizing is border-box. And then box-sizing inherit. So this has to do with the way the box model works here in CSS.

[00:05:30]
And the border box says that as we are thinking about ordering or doing math, going across our screen. What we are gonna do is we are gonna consider the border, the padding, and the content becomes one unit. So if I said width is 500 pixels, and I had a border of 2 pixels, and I had padding of 10 pixels, all of that added together, including the content, would sum to 500 pixels, okay?

[00:05:59]
And then the margin is counted separately. So that's why we use this border box. Otherwise, what will happen is, if we said the width was 500 pixels, it would refer to the content only. So that's why your layouts often don't work. You think you're working with a width of 500 pixels, but it's 500 pixels plus 10 pixels for the padding, plus two pixels for the border, plus 10 pixels for the margin, and it gets bigger than you expect and it blows out your design, okay?

[00:06:27]
So this is kind of a little thing that you can put at the top of your CSS to help make your layouts work a little bit more intuitively. It is, unfortunately, a property that doesn't inherit. So we say box-sizing is border-box, and then we say, the entire universe and everything that comes before and after that universe we would like it to inherit.

[00:06:48]
Make sense? Okay, so that's what that first little part means. Then we have the body of the document, here I've just declared a font family and some sizing. For the images, I've set them all up to have a little bit of a border radius and a max-width of 100%.

[00:07:08]
I've styled my button and I've styled my button on hover, so I'm giving all of you that for free, okay? So we just have to worry about layouts. So, we can start here then with our card. So we have a card here, I'll just leave that up here, so you've got a little HTML to refer to.

[00:07:27]
All the cards are the same. So how would I start my CSS here in terms of laying out my card? We decided it needed to have two columns. So what is the first thing that I would put here in my CSS.
>> Display grid.
>> Display grid is definitely part of it, but before I can put down display grid, what do I need?

[00:07:50]
>> Media query.
>> No, not a media query.
>> We just add the class.
>> Yeah, the class, .card. Yeah, .card, that's where we start. And then we say, display grid, great, what comes after that? I'll put up the picture again. What does that look like in terms of ratios?

[00:08:15]
[INAUDIBLE]
>> Pardon.
>> Sorry, [INAUDIBLE]
>> Three to one
>> Like a three to one, right? Like, 25% is the picture and 75% is the title and the button, yeah? So we could say then, grid-template-columns would be 3fr 1fr, yeah? Make sense? And if we take a look here again at our card, you notice we have some space up here on the top and we have some space here underneath.

[00:08:52]
Does anybody know, is that padding or is that margin? Cuz we have borders here too. Is that padding or margin, that's causing that space?
>> Padding.
>> It's padding, cuz padding is always inside of the borders, right? Okay, so let's put in some padding. 3rem 0, and let's refresh my memory again, what does two numbers mean?

[00:09:17]
>> Top and bottom.
>> Top and bottom, the first one is the top and bottom and the second number is left and right. So we're gonna put 3rem on the top and the bottom of our grid cell. And then I'm also going to add to this a border-bottom of 1 pixel solid ccc.

[00:09:40]
So nice, light gray border. And by putting it only on the bottom, right, then I've just got one right after the other. Makes sense? How about a gap between these? Do we want any gap? I think it's looking pretty good the way it is. So we probably don't need a gap.

[00:10:03]
So we can say gap is 0. And then the last thing is, I would like to have everything aligned in the center of that image. So let's do that align items of center. So it helps a little bit. Okay, so explain to me what's going on here. What's in my first row here inside of this card?

[00:10:37]
So I have a card, we said it has 2 columns, right? So in the first row in the first column I have this h2, correct? What have I got in the first row in the second column?
>> The image.
>> The image, okay? What have I got in the second row in the first column?

[00:10:58]
>> The button.
>> The button, exactly. So this is not exactly lined up quite right, yeah? So what's going on here? Anybody have any idea? When in doubt put a border on it. So let's put a border on it, border 2 pixels solid red, okay. So I had this border on my H2, but I have all of this space above and below it.

[00:11:34]
Does anybody know what might be going on here? It's the height of the image that's causing it to be centered and then you've got like filling in the rest for just nothing.
>> Yeah, definitely, that's part of it, that's definitely part of it. But remember every heading has got some margin on it as well, right?

[00:11:58]
So we may want to take our margin and make it 0, that'll tighten things up just a little bit there. And the other thing I wanna do is make my font size a little smaller, 1.2 rem. These are tiny screens, we don't need to have big, huge fonts going on here.

[00:12:23]
So we still have this large gap between the H2 and the image here and this button, all right? So what could I do to minimize the distance between these? We know that these are actually separate rows. What could I do instead to maybe make this image span over the H2 and the button, what could I do?

[00:12:47]
>> Have the image take up both rows
>> Have the image take up both rows, right? So let's do that. So I'm gonna say this is my .card h2. So for my .card img, what can I do here? Can you tell me my numbers? Cuz if I said grid-column, what would be my numbers for the image?

[00:13:12]
What column should it be in?
>> 2.
>> 2 or 2/3, either one of those would work. How about its grid row?
>> 1 through 3.
>> 1/3, right, cuz we wanted to occupy both rows. See how it happened there? Did you see it? Now we have our image and we have our button up against the image like that.

[00:13:41]
See how that looks better? It'll look even better when I get rid of that border. What do you think? Nice? Okay, something else I'd like to do, let's also on the .card p, so the paragraph that goes around those buttons, let's take its margin off as well, cuz it has default margin on it.

[00:14:08]
Let's turn that off. Again, that sort of tweaks things just a little bit more. And then one final thing to do before we move on to our featured card, if we scroll all the way down here to Pluto at the bottom, there is a border down here at the very, very bottom of the screen.

[00:14:25]
Why is that?
>> The border bottom is 1 pixel.
>> Exactly, cuz I told it to, I said at the bottom of every card, we should put a border on the bottom, right? But the last card I actually don't want the border on the bottom. How can I turn that off?

[00:14:39]
Does anybody have an idea of how I could turn off the border down there?
>> Dot card-last-child.
>> Yeah, .card-last-child, border: none. There the border goes there just for that last card, all of the other cards all have a border at the bottom.