Basic Grid Exercise

[00:00:00]
>> So here's what I'd like for you to do. Take each moon individually. I'd like you to set it as a grid item. So in other words, we're gonna have each of these moons. I'd like you to set each individual figure as a grid item itself. And, Make the caption appear to the right of the moon.

[00:00:38]
So if we take a look at our figure here, right, we've got our figure inside of that, that figure has two children. That figure has a child that's an image, it has a figure that's the figure caption, okay? What I'd like for you to do is if you set up, If you set up your figure to display: grid, see if you can set it up such that your image is on one column, and your figure caption is on the other column.

[00:01:10]
Go ahead and take five minutes and see if you can figure that out now. Bonus points if you can figure out how to stack them up going down the page. So you have all the images on the left and all of the captions on the right, go ahead and give it a try now.

[00:01:26]
All right, so how did you do with that particular little bit of code? Hopefully that worked out okay for you. Here is the little trick to making this work. Just like humans can be both parents and children at the same time, HTML elements can also be parents and children at the same time.

[00:01:43]
So our moons may be children, as we had talked about extensively here in our HTML, but our figure itself can also be a parent with its own children. So the way that we wound up setting this up was as follows, some people created classes for this, I just do it with figure by itself.

[00:02:05]
And we say, display: grid, grid-template-columns: 1fr 1fr. And that'll put everything next to each other like that, okay? And then maybe you want a little bit of a gap in between, 2rem, give a little breathing room, just like that. And then if you wanted to make sure that all these stacked together on top of each other, what we would need to do is instead of having two grid template columns here, maybe we have just one.

[00:02:40]
So now we have all of the moons over here on the left, and all of the text over here on the right. Now the graphic designers are screaming at us again, we're so proud of ourselves that we managed to get the text on the right and the image on the left.

[00:02:54]
They always want another thing, and what is it they want this time?
>> Centering the title.
>> Yeah, they wanna put the text in the middle of the image now, right? Fortunately, that is an easy thing to do. That is another property that is here for us. So down here in our figure, what I'm going to say is, align-items: center.

[00:03:20]
And what that will do is align the center of the image with the center of the text. So that looks a little bit nicer. As always, one of the things that you can do is put a border on things. If you're wondering what's going on, one of the best debugging tools out there in CSS, 2px solid red.

[00:03:41]
We'll put a big red border around that whole figure. And then for figcaption, in case you're wondering what's going on with it, you could put a border 2px dotted blue. And that will go around your caption. That always helps, putting borders on things. If you can't see it, you can't style it.

[00:04:06]
So when in doubt, stick a border on it. All right, so for our next challenge, for all of the moons that I have here, what I'd like to do is I'd like to designate one of these moons, Europa. We know Europa's like super special, because it's possibly we got water, and who knows if it has life, and the Europeans are sending a probe there to find out.

[00:04:25]
So we wanna feature Europa as the important moon here. It's gonna sit on the left-hand side and it's gonna take up a whole column all by itself. And the next to it stacked on top of each other, we're gonna put the other three moons. Okay, so to do something like this, I'm going to go back to my grid-container here, and I am going to set up two columns.

[00:04:51]
So my grid template columns 1fr 1fr, and then I'm going to specify how many rows I want to have on this page. So I haven't told you how to do grid-rows yet, but does anyone have a guess what the syntax for that might be?
>> It's by grid-template-rows.

[00:05:06]
>> Hey, how about grid-template-rows?
>> [LAUGH]
>> grid-template-rows. Now grid-columns, we specify the widths as 1fr 1 fr 1fr, with rows, we're specifying heights. And giving things a height in CSS is typically a fashion no. And the reason why is,we never know how much content we're going to have.

[00:05:30]
So one of the things that we often do here in grid is something like auto auto auto. So in other words, make it as tall as it should be based on the content that happens to be here, okay? So there we go, we have three rows, but I only have content enough right now for two.

[00:05:51]
So that's gonna give us two evenly sized columns. And there are three rows, this is row one, this is row two., row three is down here, there's nothing in it, but it exists, okay? And if you put this into browser tools, you'll see that it's there. Now what I wanna do is put my very first moon over in the left column all by itself.

[00:06:13]
And let's just say that that's going to be Europa here right now, or, sorry, rephrase. Let's just say that's gonna be Io, that's our first moon right here. And so to do this, I am going to say figure:first-child. Have you guys seen this selector before, first-child? Some say yes, some say no.

[00:06:40]
Well, just like we can count our siblings, we can say my parents have three children and one is a girl and two are boys, right? The first child happens to be a girl, that's me. And here the first child is our figure right here, the very first one of that group of figures.

[00:07:03]
So we can select it without having to set up a class for it. So our figure:first-child, we are going to start making use of some additional properties here. And this is called grid-column and grid row. And this goes back to those numbers that we looked at inside of the browser tools, so we're going to give it a starting line, and we're gonna give it a finish line.

[00:07:30]
So here for our first child, we want it to occupy the first column. And so what numbers would go with this span? It starts at one all the way over on the left before the columns starts and it goes to what?
>> Three.
>> Where is three? Yeah, three is all the way over here on the right, two is here in the middle, right?

[00:07:52]
So it goes from one to two, just like that. So I'm gonna say may occupy in the first column. Then I wanted to occupy all of those three rows. So it's gonna occupy the first row that's gonna make it go from one to two. It's gonna occupy the second row, that makes it go from two to three.

[00:08:11]
And it's gonna occupy the third row, that makes it go from three to four. So we're gonna say grid-row: 1/4. So now we have Io over here. And you see we have our three other moons all stacked up each over here on the right-hand side. Everybody see how that's happening?

[00:08:38]
Cool, cool, cool. So if you're not happy with the captions next to these moons, maybe we wanna change a few things around, here for Io here, since this is really the important one, we could say something else that would happen here, which would be display:block. Now, I might have just weirded out a lot of you, what did I just do here for the first-child, for the Io moon?

[00:09:07]
What did I just do with display: block?
>> You overrode our grid.
>> Yeah, I overrode grid just for the first child. So just for the first figure, I turned grid off. And by default, the image will stack on top of the text. So grid's still in effect for all those other moons.

[00:09:25]
Over there on the side, we have the moon next to the caption, and they are all stacked on top of each other. Make sense? Okay, now, I said before that I like Europa and I really want Europa over there in that spot where Io is, and I want Io over in the other column.

[00:09:48]
How might I rearrange things here so that Europa, which is this one right here, Europa is over there on the left, and Io is over on the right? How would I go about doing that? Suggestions?
>> Change first to third?
>> We could change first to third right here in my CSS, right?

[00:10:07]
So instead of saying figure: first-child, what I could say would be figure:nth-child(3). Hey, look at that. And it looks like I need to say my grid-row goes to 4 here. There we go. And now I've got my three moons stacked over here on the left. And I've got Europa over here on the right.

[00:10:44]
I didn't have to change my HTML, I've just changed the order of appearance here right inside of the CSS.
>> If there are more moons, will this break the 1/4.
>> Yes, it will, it will in fact break. So if we continue to stack more moons up, and because, of course, there are many more moons of Jupiter than these four.

[00:11:05]
What will start happening? What will happen? What happens to the fifth moon? Where is it going to show up?
>> Underneath the first one?
>> Underneath the first one, exactly, it would show up right here underneath Europa in the next row. Where would the sixth moon show up?

[00:11:21]
>> Next to that.
>> Right next to that, on the right. And we'd continue on down the page. Makes sense? All right, so far, here's what we've learned. Like I said, this is like 80% of grid, you now know it, okay? The relationship between our parents and our children, the grid-container and the grid-items, right, parents and the children.

[00:11:43]
Very, very important in structuring your HTML and the outcomes that you get here. You learned about the display property, the grid-template-columns and grid-template-rows. You learned about gap, and you learned about align-items. Again, this is like 80% of what you're gonna use in grid all the time. You learned about these child properties, grid-column and grid-row.

[00:12:03]
And you learn that number syntax in terms of where you want to place things in space. We've taken a look at re-ordering those grid cells, very, very easy to do. We know that the intrinsic grid is gonna help us lay things out. If we have extra elements here that we haven't specifically called out in our grid layout, they will just continue on in the pattern, grid is gonna take its best guess at it.

[00:12:29]
So those are all pretty core grid types of concepts. And so now we are ready to give you your own little activity to try out.