Grid Template Area Exercise

[00:00:00]
>> So guess what I'm gonna do for you now, give you another thing to do. So now you try it again, we're gonna do the same exercise one more time. So here's your beginning code pen, here's Mars again, and we're back to what we had here for all of our numbers and so forth.

[00:00:21]
So what I want you to do this time around is I want you to set up our layout with grid areas. So you gonna have five different areas. You've got this giant picture here, right? You've got a giant picture here, this one spanning two rows, Mars here spans two columns.

[00:00:40]
We have a couple of images by themselves and we have a giant image down here at the bottom that's spanning two columns. So you gonna need to come up with your grid template areas that reflects the design of this page, type that all out and then assign those areas to the images.

[00:00:59]
Great, so how did you do with the grid template areas challenge? Hopefully that went okay for you, let's go through my particular answer. So here's what I have on the page. I have here grid template columns. I have 2fr, 1fr. It may confuse you that I'm using grid template columns.

[00:01:16]
In this case, I'm leaving it here to make sure that I know that the first column is It's wider than the second column. So I still wanna have that extra width on my first column. So I've put that in place. Then the second thing that I have here are my grid template areas.

[00:01:30]
And we have different named spaces. So this was sol 10, this happen to be the Martian date, when this picture was taken was on sol 10. So I've called this sol10 sol10. In other words, spanning across two of those columns with the same name. Then we have the next row, okay?

[00:01:54]
So I have Mars, which is, obviously, that's Mars, stacked on top of each each other, so it's gonna occupy two rows, one column, correct? And then we have media right and we have microscope. So that's what these pictures are over here. And then across the bottom, I have intrepid in intrepid.

[00:02:16]
So this picture down here will stretch across the two columns because it has the same name. Then what we need to do once we've established all of these names here in our grid template areas, is we need to assign those names to each one of the children. So where do we want each of these children to display?

[00:02:35]
So those names that we created up here in our grid template areas, we then assign here in each of our children using the grid area CSS property. And the value then are the names that we gave those areas. And obviously, like salted and Mars and intrepid, those are not values that are in the CSS specification.

[00:02:55]
You can call these grid template areas anything you want. I called these by the names of the pictures, you could have called them Mary Sam and George and they would have been perfectly happy to work out exactly the way that this dead provided that you set it up the same kind of way