Magazine-Style Layouts with Grid Template Areas

[00:00:00]
>> Next up let's take a look at some possible sort of magazine style layouts I use the word magazine loosely here that typically on a website maybe a content management system based website or a blog based website. Where you have a whole bunch of units of content maybe there's an image a little bit of a title a little bit of starter text that type of thing you may want to play around with the look of that page so you have a lot of different units that are coming in from a database.

[00:00:31]
Or from an API wherever it happens to be coming from and you want to lay out a bunch of different boxes here on the webpage, in flex box, you would just read those in and they would wrap on two lines so it actually kind of look just like this.

[00:00:45]
Here's all of the kittens of place kitten and they're all just lined up here in a row and that looks great but maybe you want to emphasize some of these maybe they are particularly important. Articles that happen here inside of your system maybe you want to make some of these bigger some of them different types of layouts it may even be something you want to program into say an admin side on a content management system.

[00:01:17]
Where your user could check off that something is a featured article or it's a main article and it would consequently display differently inside of your web page so those are the kinds of problems that I'm thinking of here next I'm once again sticking with figures here. But you could very easily do these as little units of content maybe they're inside of div tags or article tags and they have the same kind of information, images and headings and maybe a little bit of text, a link, that kind of thing.

[00:01:49]
So what I've got here to start with is just all of these figures they're coded up the The same way you've seen me encode up figures throughout this course and then down here in our CSS we have our images are set to 100%. Remember again that's our hack for responsive images so that they flex with the size of the webpage just like that and I've also eliminated the finger caption I set a margin top of negative four pixels you may have noticed in the default styling inside of the figure.

[00:02:20]
That there is a small gap between the image and the figure caption this is eliminating most of it it looks like maybe there's still a little bit there maybe it needs negative five pixels and then inside of my media query I have laid these out just in a simple grid system.

[00:02:37]
So I said display grid I created four evenly sized columns, however many rows we needed, and I set my gap to be 1%. So now the question is, how do I set up exceptions to these rules, So not all of these are equally important? Which is what this type of display indicates how would I indicate that something is more important here on the grid system or less important here on the grid system.

[00:03:02]
So let's go through how we might set up something like that let's say that I want to set up a featured item and you can define featured however you want but let's just say in this particular situation that I want the featured item to be particularly large. Maybe I want it to go across a couple of rows and a couple of columns so that one is particularly big and then everything else can kind of wrap around it.

[00:03:32]
So I could just simply set this up to say the class of featured would have a grid row of say span 2 and a grid column of span 2 just like that. From wherever it is make it span across two columns and two rows so, then when I go and drop that in I could just pick any of these particular articles and say that it's a featured item so this one's gonna be featured, third, and that one's gonna be featured.

[00:04:13]
So just by picking two things and putting them here inside of the layout, you'll see here that grid will very nicely take that particular item, it blows it up over two rows into columns, and it will just wrap the other kittens around it just like that. Okay, so you could continue to tweak these a little bit more if you wanted to make sure that your larger image maybe you want to pull that down a little bit or you maybe there's more text that goes here with a featured image that shows that type of thing would be one possibility.

[00:04:50]
But as you can see here it's very easy just to apply this type of thing wherever you want it to occur If you want it to be very specific about where that specific featured item occurred, so it's kind of weird to have it here in the middle of the page, maybe you really want it towards the top of the page.

[00:05:09]
Then as always, you could be more specific about your grid rows and your grid columns so, let's just say for example, our grid row is going to be one slash spam to in our grid column is gonna be one slash span two. So now here's my featured image up here at the top and all of the others wrap around but be very careful when you use this type of notation, because we have said that the class of featured, always starts at a grid, row of one, always starts at a grid column of one.

[00:05:46]
I had originally applied this to two different cats have mine so, if we double check here we've got 1, 2, 3 and then 5, so 4 is missing 4 has the class of featured on it right here. And then we go through 6, 7, 8 and then 10 so cat number 9 has the class of featured on it but if you'll notice, we see cat number 9, but we do not see cat number 4, why is that?

[00:06:19]
>> Override?
>> Not quite an override what's going on here is we have, we've said started at row 1 line number one and a column the column line number one. So these two cats are on top of each other cat number four is here, but it's underneath cat number nine.

[00:06:42]
>> Yeah, underneath.
>> Yeah yep underneath overlap exactly, you can use the Z index property to change the order of these so if you wanted to let's say cat number four we'll say featured and we'll say top we could set up a class of top. Just for fun, and then we could say Z index of whatever will be extreme and say 1000.

[00:07:14]
And now cat number four is on top, the cat number eight is underneath, okay? So remember that won't happen if you're not specifying where these are supposed to start if we Instead specify these as just a generic span to, they show up wherever they are, and you'll see both of them.

[00:07:31]
So you'll need to give that a little bit of thought as you work through an example like this that is one type of syntax that you can use for a problem like this. So you can use that span notation With the lines that we've talked about quite a bit to this point in the course there's another kind of syntax, this is called the grid template areas.

[00:07:51]
So let's go through exactly how we would go about doing that and a couple of other pointers along the way here as well, so first of all we can see we've specified how many columns and how many rows we have. Now I can actually name certain combinations of columns and rows into a very specific area and the way that I would go about doing that is using the grid template areas syntax.

[00:08:24]
And the way that that one works it's a little bit weird and CSS is very odd looking syntax but this is how it goes we are going to say grid template areas, that's our property, column just like you normally do in CSS. And then inside of the quotes, this is going to be my first row here, I'm going to say, featured featured featured featured that looks very, very repetitive.

[00:08:52]
But basically I'm saying that in my first row all four of those cells are assigned a area name of featured and then if I wanted to add to this a second row of information, I could say something like this, dot dot, dot, dot, dot dot main main. So here I'm saying on the next row, we're gonna have two items here, they're going to be called main and then we'll put in the semicolon.

[00:09:26]
You could continue on like this for as long as you wanted you could make things span over the rows in addition to spanning over the columns, whatever you wanted to do. But basically you're taking each cell going across in that row and you're giving it a name and if there are two cells that have the same name next to each other they fuse into a single area.

[00:09:47]
If you have two cells in different rows they have the same name they fuse into different areas that's how that all works, so once you have these names established then you can go through and change around, your styling here. So rather than saying featured with using the span notation, here what we're going to do instead is we're going to say grid area featured.

[00:10:16]
So whatever has the class of featured is now assigned to the featured area. So here's that cat that is going to occupy that full first row. And in fact, we have two cats occupying that because we have two cats with the class of featured in this time cat number four also has the class of top on it with a Z index of 1000.

[00:10:38]
So that one winds up on top and the other cat is underneath. Likewise we could say to set up I class of main and we could say it has a grid area of main. And that will be our other location for some time and have some kind of cat here and we can just go ahead and assign that here in our HTML.

[00:11:09]
So cat number whatever this was cat number eight let's just say we wanted to make put that in the main location so we'll give it a class of mean and now you'll see there's the cat with a class of mean. And we have the other cats filling in all the way around it just like that kind of a nice sorta setup.

[00:11:34]
And so once again, if you're on a content management system, this might be a better approach to getting those images or units of information, whatever they happen to be off the server, and then arranging them here on the page. You could set some UI that will allow, your content creators, to assign, specific areas like featured or main or you can call them whatever you want and that would allow them to set up a web page configuration like this.

[00:12:04]
That type of thing, doesn't have to be in the top edges the way that I've drawn it here but that's generally a good way of doing that you're also not prevented from combining these techniques. So just because we started here with grid area does not mean that we can't use the span syntax anymore so we could start setting up some span syntax as well so if I had another one here let's call it middle.

[00:12:36]
I could say a grid row have span 2 loops span space 2 and a grid column of span space 2 and we could then take that And assign it to any of these class as well so let's say cat number one, we actually want it to go to the middle actually not cat one, let's do cat here in the middle.

[00:13:15]
Class equals middle go and then if you take a quick peek there it is so here's here's the main cat here and then here's the middle cat over here it looks like I just happened to pick such a space that it wound up showing up over here. If I took that class in middle and moved it elsewhere.

[00:13:46]
Now, it's over here on the left hand side instead just sort of depends yeah, Mark.
>> With grid template areas, what's the difference between the dot dot dot and just dot again
>> I don't think there is a difference you can have just plain old dots or you can have the three dots and I think it will do the same thing it's kind of an offset type of situation, that's what that is doing.

[00:14:09]
>> What's people saying so cool magic?
>> So cool magic I know no math isn't it great, super fun stuff. So this is just a concept type of page here to give you hopefully again generate ideas about how grid could be used in your page layouts. You can think of these figures as cards potentially that's actually our next topic to talk about.

[00:14:32]
This is one type of treatment that you could, use for laying out different kinds of cards on the webpage we've kept this layout really, really simple so far. Notice that I have a media query, it's at a minimum width of 600 pixels so I've just kept this as simple as simple can be, but you can actually, take this to a whole another level.

[00:14:54]
And that's what we're going to look at in the next section here as we start to look at card based layouts.