Responsive Web Design- Grid and Media Queries

We saw how Flexbox is one way that we can start to lay things out, and there's another way that we can lay things out using something called Grid. So just like we can display things as block, inline, we can use displayFlex to unlock a bunch of Flexbox properties. We can also use displayGrid to create a column row based kind of grid and then put things onto that grid.

Now this is a big topic. We're just going to start scratching the surface of displayGrid here in this exercise, but I wanted to introduce you to it. Also, we have not been creating different layouts on different size screens.

So technically a responsive layout or a responsive web page is one that has something called media queries, which allows us to do different things across different screen sizes. We're going to learn that in this exercise as well. We've been creating fluid and mobile optimized layouts, but technically responsive means different things on different size screens.

So let's take a look at this layout here. We're going to preview this in the browser, and this looks pretty good already on a mobile phone. If I right click and inspect and make this very narrow, there are some things that I would probably change.

I think the type is maybe a little too big. There's also a little too much space all the way around on a mobile phone. So there are a few things that I'd like to change.

Also, I'd like some more space between the sections as well. But this is maybe not the best layout that we can get for a desktop. I think we can get things like two columns here where education can come over here on the right.

So I want to create a two column layout for larger screens, but a single column layout for small screens. Let's get familiar with this sectioning that we have here. We've got the main content here, which is we've got the header and then the main content.

The main content is broken down into three sections. Sections, if you remember, the section tag is a thematic grouping of content, usually with a heading to tell people what that topic is. So these are three different sections here.

We've got this section, this section, and this section here. And when we think about the possible layout on larger screens, I think a two column layout would be nice with this statement of intent going across both columns, spanning those two columns, and then work experience on the left and education on the right. So this is a smaller piece.

This can be kind of a, maybe we do like a two thirds, one third kind of layout where the experience is two thirds, because that is the primary thing. And then maybe one third on the right being the education that we have there. And then keeping it so that mobile phones are just a single column or smaller screens.

All right. So these have IDs. Now, again, we could do these with classes as well, as I've said before, but these are, there's only one statement of intent.

There's only one experience, one education. So IDs do work here, although we could have done them as classes as well. These do share a class of primary section, just as a way to style all of those, if we want to style all of those, but we're going to be using these IDs to uniquely talk to each of these three sections.

Now, thinking about the structure here, main is the parent of these three sections. If I set display grid on the main, these children will be able to use the grid that is defined on the main, much like display flex with this parent child relationship. We just, we set the display flex or display grid on the parent, and then the items that are in it will be able to, in this case, use that grid that we define.

We're going to set that on the main. All right. So I need to see, is there a rule for main? I could see that if you're not familiar with the page here, you can say, go to symbol in editor, type in main, realize, nope, nothing has a, I don't have any main styles.

So I'm just going to put this down here at the bottom and say, okay, so for the main section here, I want to display this as grid. Now by itself, if we just say display grid, it doesn't change anything. Yes, it does add this little grid indicator saying, hey, this is a grid container, and now you can use stuff for the children.

But it doesn't change anything by itself. Unlike display flex, which did put things next to each other. It put them in a row by default.

When we say display grid, we do that to unlock other grid properties that would not work otherwise. We have to say display grid so that things like grid template areas or columns or rows, those become enabled because it's display grid. We're going to define a column-based grid.

We're going to do grid template columns. And here we are going to put in the size of our columns and the quantity of columns. So I'm going to say, I want one column that's two fractional units.

And so this is one column here, and this is another column here. Now the FR unit of measurement we haven't seen before. So FR is for a fractional unit.

You can also think of it as a certain amount of the free space, but these are a fraction. So two fractions versus one fraction. If you add these two up, you get three.

If you think about a three-column design, if you're giving two of those fractional units to the left column and one of them to the right column, then you've got a two-thirds, one-third kind of thing. It's kind of like in a way saying 66%, 33%, but you could also do something like this, where these are twice the size of these, and it's going to add those up and say 2 plus 1 plus 2 is 5. Now each fractional unit is a fifth of the space that's free, and it divides them up and gives two parts to this, two parts to this, and one part to this. This would create a three-column layout.

So you're setting the quantity of columns, you know, how many columns you have, as well as the size of those columns all at once. All right, so I'm going to save that, come back and hit refresh, and it did create these columns, and it automatically put things into there, but they might not be put into the place where we want them to be. So I can click on this word grid here to turn on the grid display, just so I can kind of see the grid that's behind the scenes, and I can see that there are two columns that it has, and I can see that this left column is twice the size of this.

If it helps, I could say let's just do a 1fr 1fr. That would do equal fractions, so that way I could have a 50 percent 50 percent, if you will. I could do 1fr 2fr, like so.

If I do 3fr fractional units, so 1 plus 3 is 4, so this would give a four-column layout essentially. So fourths, so it's one-fourth here, and then three-fourths here. So this gives like a 25 percent, 75 percent, but you don't have to do any of that math.

So at first glance, I was thinking why can't we just use percentages, and then I realized it's there's something nice about this in the sense that you don't have to do math, and it just takes care of the math for you. So you can resize these pretty quickly. We're going to do two and one for that two-thirds, one-third kind of layout, like so.

And now we have the issue that, well first of all, there's not enough space in between things. So I'm going to put a little bit of gap in between those. Let's say 30 pixels of gap in between those, and that puts a little bit of space not just there, but also down below here as well.

So it puts in a vertical gap as well as a horizontal gap. That is only a gap between columns and between rows. It is not padding on the outside, so it won't put space on the top up here or the outsides.

It just puts it on the interior dividers between things. All right, so now we have the issue that what happens when it defines the grid? It defines columns, and if you only have two things, you would just get two columns. But the thing is that I have a third item here, and so when we don't have an extra column for that to fit in, it automatically creates another row.

And we have the same column layout in that next row, but it'll keep creating additional rows as necessary. Just slotting things into this goes into the first slot in our grid, the first available space. This goes into the next slot, and if there's not another column, this will go to the next row, go into the first column, and the next item would go there, and so on and so on.

So I want this statement of intent, I don't want it to be in a single column. I want it to span across both columns, so I need to tell it to do that. So I'm going to tell this statement, which is an id of statement, I'm going to tell it to say I want that statement for its grid column to span two columns.

Notice up here it's grid template columns. So this is creating the grid itself, and then on an item that's in the grid, so this is the parent up here, this is the child. On the child, you can say for your column in the grid, you should span two columns.

And I do have two columns, so it will span both of those. And now that spans two columns. So once you have defined the grid on the parent, it's then the next step is to say where are these things in that grid.

Now we don't have that extra row down below with that extra kind of random thing there. We have this one spanning across. The next item goes into the next available slot.

If this has filled up kind of two slots there, then it goes to the next row, it creates a new row, and we still have the same two columns that we defined. This goes into the one on the left, and then this one goes to the one on the right. All right, so now if I turn this off, and we just get to appreciate our nice grid, look at that.

We have a nice grid there. All right, now this works on our larger screens and looks quite nice. But it's not going to work very well on our small screens, because the way that I said that is I said on all screens do the same thing.

Not very good. So that's not going to work. What I want to do is I want to only do that on larger screens.

On small screens, I want there to be no body margins, because here we actually have some body margin. We have 20 pixels of body margin. I actually want to zero that out completely, so that we don't have that extra gray kind of wasting screen space.

I think it's fine to just have the whites going edge to edge. There's a little bit of a border around there to make it look a little fancier. So I want there to be no body margins on mobile phones, and to only get those body margins on bigger screens.

Here, if I hit refresh, I think we can afford to have that margin on bigger screens. So I need to start doing things depending on screen size. So that introduces the idea of media queries.

The way that we're going to do things is that all the rules out here that are outside of a media query, which is going to detect various screen sizes. So all these things outside of a media query, those are going to be ones that are going to target mobile phones. We're going to do what's called mobile first development, meaning the first set of styles are going to target our mobile phones.

So that means I'm going to remember 20 pixels for later, but I'm going to start off with zero, and that'll be appropriate for mobile phones. And so we'll start off with no margins, and then we're going to add them back in, but only for larger screens. Now I can decide at what screen size I want to start adding them back in.

So I'm going to go down to the bottom here, and I'm going to create our first media query, where I say at media. And with the at media, you're going to determine what size, in this case, what size screen. I'm going to say at a minimum width, because we're going from mobile bigger.

So on mobile size, the small screens, it's going to be zero margins for the body. Then starting at a minimum size of, and I could put in any size I want here, but let's say we think 700 pixels is going to be good. Starting at a minimum of 700 pixels and bigger, then we could put in these curly braces, and this is going to contain all of the rules that we want to conditionally apply only to these larger screens.

I'm going to recreate a new body rule, and I'm going to say that on these bigger screens, there should be a margin of 20 pixels. This rule, and any rules you put in here, you can put as many different rules as you want to inside of these curly braces. These rules will only be applied if this condition is true, if it's a minimum of 700 pixels or larger.

So anything outside of a media query, those rules would always be applied. So it's kind of like saying all screen sizes. Now we're going to target, for the stuff outside of the media query, we're going to target mobile phones.

We're doing mobile first development, meaning up here, this is for our mobile phones, that will be overridden because this has a specificity of one, and because it has a specificity one, and this also has a specificity of one. In that case, because they have the same specificity, the later rule overrides the earlier rule. So it's very important that the media query comes after the initial declaration of what we want our body margins to be.

So I'm going to save that, come back, and hit refresh. So on our small screens, anything below 700, then we have no body margins. And then as I get bigger, watch the size here.

As I get bigger than 700, when I hit 700, boom. Now we get this media query being applied. So this is not always going to be applied.

It's only going to be applied at 700 pixels or bigger. Boom. Now we're doing something different on different screen sizes.

This is what a truly responsive web page is, is it's got a base often of a flexible design, but then we need media queries to change certain things that we don't like. And we can change as little or as much as we want in those media queries. All right.

So I've taken care of the body margins, which is good, but also this whole two column thing, I actually don't want that to be applied to mobile phones. When I created these rules, I created them outside of a media query, and I don't want that to be the case. I do like the gap that I set on those things because I actually like the vertical space there.

If I go into my main here, I do like the gap that I added, even if it is just a single column, but this two column approach here, that should really be only done on mobile phones. So I'm going to come in and say, you know what that mean? Let's say, for example, that should be two columns here on our bigger screens, but let's say on the phone, we're just going to do a single column, just one column, 100% of the free space. So it'll define the grid.

It'll set a certain template and it sets the gap. And the only thing we're going to change is how many columns we have on the bigger size screens. Now when we're on the smaller screens here, now this is still spanning two columns.

And so it actually creates two columns. So also that code should not be applied to mobile phones as well. So I'm going to cut that, paste it here.

Now we've got these three rules that are all only applying to our bigger screens. Okay. So I'm going to save that.

Okay. Now we're getting better here. All right.

So on the phone here, this, it defines the single column. It does have our gap between things. So I have the same amount of space.

That's good. And then only when I get to 700 pixels at that point, boom, now I get the body margin creating the gray and I get the two columns. And when I get the two columns, this also spans those two columns, because if I wasn't spanning it, it would look like this.

So all of those things only happen on the bigger screens. Now I get something that looks nice on phones and looks nice on bigger screens. Great.

Now, as far as the 700 pixels, how did we figure that out? Well, these are called break points. When are you going to switch from one appearance to another? But I think a break point is if you don't change, you're going to break the layout. And so when do we want to change from one to the other? If we think that these two columns are too small at this size, I could say, well, let's wait until a bigger size, maybe wait until we're at 800 pixels.

And we don't have to change so soon. We can say, no, we got to get all the way up to 800 pixels for those to fit. Or maybe I think, no, I think we could change earlier.

Maybe we could change as soon as 500 pixels. And maybe that would work. So you can try these out.

There's no special amount there. And this is why you want to pay attention to this amount here, because you can actually see, and you might say, oh, no, that's way too tight there. And maybe you go up and you see when you think it looks okay.

And maybe you think it looks okay, like right around here, right? And right there is 660 pixels. So you can say, well, that looks good. I'm willing to change at 660 pixels or whatever amount you're willing to change at.

There's not a special number that needs to be put there. It's whatever is appropriate for your layout and your content that you have there. Now, we can change as many things as we want to here.

For example, I might say that I think that this heading is a little too big on mobile phones. So right now it's 42 pixels. Going up here to my H1 rule, 42 pixels.

If this is for mobile devices, I should change this appropriate for mobile devices. And then I can move this to the larger media query down below. So I'm going to copy that.

And maybe for this mobile phone, I think a smaller size of, let's say, maybe like 30 is more appropriate. Let's try 30. Maybe that's more appropriate for a mobile phone.

And then I can say, let's go down here to our media query. And I could say that the heading one will instead be this size only starting at 666 or higher. So I hit refresh.

So on our small screens, it's going to be that smaller 30 pixels. And then once we hit the bigger, now the heading changes size. We get body margins being added.

We get the two column layout. So you can change anything that you want. You can change individual attributes.

You can change layout. You can do all sorts of changes. And the idea is you're not getting a whole different layout.

You're just changing things that you don't like about it. So the base things that are outside of a media query, we call this mobile first approach because we're targeting the layout of a mobile device first. But really, the lack of a media query out here where they're not in a media query at all, these are saying this is true of all screens.

And then anything you don't like on the bigger screens, you override those things, just the individual settings. And you just override the things you don't like. So you still get all of those styles.

And then you just change anything that you want to add or change and that you disagree with. All right. So this layout looks great.

But as a reminder, there were a couple other things we did in other exercises that we just want to remind you of. If I preview this on an actual mobile size, like kind of trying to preview a mobile device, just resizing the window here does not simulate a mobile device. But there's a button here for the mobile simulator here.

And if I click on that and I look at it, well, that's interesting, right? So let's say I preview this on one of the iPhones here. And I'm getting two columns. Now, I thought we just saw that we only got one column on a mobile phone.

And also the sizing and relationships of these things is just different. Like this is supposed to be smaller than this. And yet it's about like it's kind of similar size.

So like something's off about this. And if you remember, there were a couple things that we need to make sure that we always add to make sure it's not doing these things. So the default assumption of a web browser is that you were created as a very old web page pre-iPhone and that it's going to render this page as though it is a 980 pixel wide set of content.

If I go to about 980 pixels here, it's going to render it like this and then just scale it down. Now, when it does just scale it down, which the heading kind of looks like that's happening. But then the other stuff that says, oh, that type is really small.

Let me make it bigger for you. I don't want my browser to do that. And so there's a couple of things we need to add.

There's the little snippet here that we have typed in just so you can copy and paste it. This little bit of code that says to not adjust the font size to keep it the normal default 100%. Don't make it bigger.

Don't make it smaller. This you want to add to every page you do. So you always add that in the beginning here.

We just wanted to do this again in case you forgot. That's something you should always add to every single page you do. So that's step one.

Now, when I refresh this, now it does truly look like a 980 pixel page scaled down to fit the mobile device. It's not artificially enlarging text based on whatever it thinks it should do. Sometimes enlarging it, sometimes not enlarging it.

But then step two is, stop rendering me like I'm a 980 pixel page. I designed for each different device in mind. Whatever size device, it should match that.

And so we also need to, in our HTML, add the viewport meta tag. So I could type in meta, choose this viewport version of it. And this says, don't render the viewport as 980 pixels.

The width of that shouldn't be 980 pixels. It should be the device width. So every device will report a different width.

And basically, I'm saying I designed for mobile devices. I've designed for that. So stop lying, stop pretending you're a 980 pixel desktop and just scaling it down to the phone.

I've optimized for you. So be honest about your width and don't apply any initial scaling. So don't zoom in or out.

Just be at the normal 100% zoom. So I'm going to save that. That is also something you want to every single webpage you do.

I just want to reiterate why we're doing that on every single page. And now, look at that. That's much better.

That's what we expected to see. And you don't see those unless you're in this mobile device emulator. You don't see it when you just resize this because this is simulating just a desktop at a smaller size.

When you go into this mode, this does try to emulate the mobile device. And this looks correct. We got the styling that we'd expect.

Now we can look good across all different devices. And as you get, if I go into responsive here, I could simulate kind of bigger devices. This is what I expect it to work like.

But I just wanted to reiterate that we do have to make sure that we add those two things to every single page. And with that, we have created a nice layout here with multiple columns that looks good on mobile devices. And so while there is more stuff you can do with grid, this is a nice little introduction to get you started with it in creating more complex layouts.

Go ahead and give this a try yourself in exercise 6c.