In the previous lesson, we looked at how to create our grids and how to size them. 1
In this lesson, we're going to talk about how to lay out items in the grid that we've created and how 2
to place them in the areas that we want. 3
Previously, we saw this layout when we said this is a really great layout to use CSS grid to create. 4
So let's use CSS grid to create this layout by learning about how we place items in our grid. 5
But before we do that, it's really important to define some of the terms that are used often in CSS 6
grid. 7
The first thing, if you remember, is we created a container that contains all of the items, and this 8
is usually a div and it's called the Grid container. 9
The items that are placed inside the grid are, as you would expect, called Grid items. 10
And when we create and size our grid, we create these rows and we create these columns. 11
Now, these are collectively known as Tracks. 12
We have our Row tracks and we have our column tracks. 13
And we usually create and size these tracks using grid-template-rows or grid-template-column. Within 14
the intersections of the tracks, 15
we create these small units which are called a grid cell. 16
They are the smallest unit in a grid and they can be different sizes. 17
So this one, for example, is a little bit wider than this one, but they essentially sit between the 18
columns and the rows. 19
You can use multiple cells to create a grid item. 20
For example, in this case, we've actually positioned our grid item across two of our grid cells, 21
this one and this one. 22
And here we've created a grid item that is positioned vertically onto two of our grid cells. 23
And then the final piece of the puzzle are the lines that separate our tracks. 24
We have horizontal lines and we have vertical lines, and these are called the Grid lines because they 25
are essentially the grid lines. 26
And we can only control the grid lines by using that gap property to specify its height or width. 27
But we can't really change its color. 28
We can't really put anything inside the lines. 29
They are just that they are lines for layout. 30
With all of those things combined together in a grid, we've got our lines, we've got our tracks, 31
we've got our cells, we've got our container and we've got our items. 32
These are some of the most common words that you'll hear me say when we talk about grid and especially 33
when we're thinking about placement. 34
It's all of these things combined together that allow us to create these layouts using our grid. 35
Let's try and create that layout using actual code. 36
I've created a grid container and inside I've placed three grid items by creating three divs. 37
Now I'm going to update the CSS code for that grid container. 38
Make it use grid by setting display to grid. 39
In addition, I'm setting the height to 100vh. 40
Remember that by default a div is going to span the entire width of the window, but it's only going 41
to occupy as much vertical space as there is content, 42
but by setting the height of our container to 100vh, then it's also going to take that 43
container and make it stretch all the way down to the bottom of the window. 44
So now that we've got our grid container, we can create our tracks, and the tracks, if you remember, 45
are created using the grid template properties. 46
We're saying that there should be three columns. 47
The first two are about the same height as each other and the third one is a little bit wider. 48
And then we've said that there should be two rows of equal height. So something like this would get created. 49
So we've got our tracks, we've got our lines, we've got our container, 50
now, the items get placed in by default. 51
It will start from the first and it will go into each of the cells that are available. 52
This ".cowboy" will go into here. 53
The next one the ".astronaut" will go into here and the ".book" will take up the final cell. 54
This is before we specified any sort of positioning. 55
And the final thing that we've updated here is the gap. 56
We've said that this should be a 3rem gap. 57
We're saying that each of these lines should be 3rem thick, and that means that we don't have 58
to use padding or margin to separate the items in our grid. 59
And when we run all of this code, this is what we will see. 60
You'll notice the 3rem between each of the grid items. 61
You'll notice the ratio of the width of our column 1 : 1 : 1.5, 62
but you'll also notice that there's actually a whole track down here that's unoccupied because as I 63
mentioned, by default, our grid is going to lay out our items into the unoccupied cells, one item 64
per cell. Before we change that and create that layout 65
in the beginning, 66
I have a small challenge for you. 67
Wouldn't it be nice if the content of each of these item divs were actually centered properly like this? 68
And in order to do this, we're going to revise what you've learned about Flexbox. 69
Remember what I said 70
about how Flexbox is something that you're going to use with grid? 71
Grid doesn't replace Flexbox, and Flexbox is great for lining items in our layouts. 72
Go ahead and download the starting code, which is a zipped file called 10.2 Grid Placement, 73
extract it and open it up inside VS Code. 74
If we go ahead and show the preview, you'll see our three grid items and I've made the emojis a little 75
bit bigger to make it easier to see. 76
Now your goal is to make this website look like this with each of the emojis horizontally and vertically 77
centered in our div. 78
And you're going to do that using Flexbox. 79
So have a think about how you can do this. 80
And if you need to go back to the previous module on Flexbox, look at Flexbox Layout and see if you 81
can figure this out. 82
Pause the video and complete this challenge. 83
All right. 84
So the first thing we're going to need to do is we're going to need to turn each of these divs into 85
a flexbox container. 86
And we'll do that by setting display to flex. 87
Now, once we've done that, the next step is to use the justify-content to set our content into the 88
center, and justify-content, if you remember, is along the main axis of our flexbox. 89
So when we said that this should be display: flex, we've essentially created a row-based flexbox with 90
just a single item in it, and we told it to justify itself into the center horizontally. 91
The next thing we need to do is to move this down to the vertical center, and we can do that using 92
the align-items property. 93
Let's set that to center and you can see how easily we've managed to center each of our text items inside 94
our div just by using Flexbox. 95
Flexbox provides one of the easiest ways to center an item inside another container. 96
And if we were doing this with floats or CSS or absolute positioning, it will be a nightmare, especially 97
when you want to change things and adapt your layout. 98
But as you can see, Flexbox working alongside Grid is super useful and makes it easy for us to create 99
any sort of layout that we desire. 100
These tools together work beautifully. 101
Hopefully you've managed to do that and you've got your emojis centered in the middle of the divs. 102
The next step is to try and create this layout that we said should be really easy and doable using grid. 103
Let's go ahead and lay out this first item, this cowboy emoji. 104
In order to do that, I'm going to set it apart from the other divs by giving it a blue background color. 105
And then I'm going to set a property called grid-column, and I'm going to set the value to "span 2". 106
Let's see what this does, first of all. 107
Now, you might remember this layout comes from our chrome developer tool and we can switch it on in 108
order to see the lines and the tracks in our grid. 109
When I selected the cowboy div, this very first div and I set it to span two columns, 110
essentially what happens is it's going from track Number 1 all the way to track Number 3, and 111
it's bridging these two columns and that's what span to columns does. 112
So it starts at the position where that div is supposed to be and this is the end result. 113
If you take a look inside the folder of the previous exercise, you'll see that we provided the code 114
for this demo. 115
Now, I'm a big believer in learning programming by playing around with code, so I recommend going 116
into the demo1.html. 117
seeing the code that we've added and then go ahead and click on Show Preview and we can view this layout 118
in our browser. 119
Now if you right-click on that div that we just laid out, you can see the grid by clicking on that 120
grid chip and you'll see these lines show up. 121
Now you can change the line color by selecting this box and we can make it a little bit darker to make 122
it easier to see. 123
Now, the other part that's really helpful about the Chrome Developer Tool is it actually shows you 124
the line numbers. 125
So you can see that the first one is line Number 1. 126
The second line is line Number 2, line Number 3 and line Number 4. 127
And this is really useful because there's another way of positioning our items. 128
If we go into our styles and select our first div, you can see we've set the grid-column to "span 2". 129
But if you notice there's a little triangle next to that property and when you click on it, you can 130
see that it's actually a shorthand property for two other properties where that item should start in 131
the grid-column and where that item should end in the grid-column. 132
Let's switch this off and actually add in those two properties. 133
So let's set the grid-column-start. 134
Let's say instead of the default where it starts at, where it would be placed normally in the first 135
cell, let's tell it to start from the second line. 136
So now you can see that div move over to start here. 137
And if we go ahead and specify the next property, which is grid-column-end, then we can say maybe 138
it should end at 4. 139
So now it's positioned starting from column number two, ending at column number four. 140
Another way to specify the last line in a grid is to use these negative values. 141
So if you look at the bottom, you can see all the negative values specified for each line. 142
So if we count from the right-hand side, then this line is -4. 143
This is -2, -3 and -4. 144
Let's say the grid-column should end at -1, 145
then it's going to extend to this last line. 146
And this minus one is really, really handy because if you had many, many columns and you're not quite 147
sure how many columns there are because maybe you created the grid dynamically or using code and it 148
extends itself automatically or something crazy like that, 149
you can always use minus one to specify the right-handmost line in the grid, and you can always use 150
the positive number one to specify the leftmost line in the grid. 151
These are just some really handy tips. 152
Now, in addition to -1, you can see there's also -2 and -3. 153
But I don't recommend using these because it very quickly gets confusing when you look at this at a 154
glance. 155
So I only recommend using -1 or maybe -2 if you really want to stretch it and using the 156
positive numbers the rest of the time. 157
Another thing to note here is you can actually start and end whichever direction you want. 158
So let's say that I wanted my grid-column to end from the second line and I set my start to line Number 159
4. 160
Then it's going to flip that and still take up these two columns. 161
It doesn't actually matter whether if your start is to the left of your end or if your end is to the 162
left of your start. 163
And you can even change this to span 2 and change the end to auto, which is the automatically initial 164
position of the div before you did any positioning. 165
So in this case it should be the first line. 166
And if we go ahead and expand our original grid-column: span 2, to the shorthand is exactly the same as 167
what we've done here. 168
It's important to remember that the grid-column property is actually short for two other properties, 169
and we could set each of these properties separately, or we can set it by using grid-column and 170
grid-column-span, and then a particular number, for example, span 2 is basically telling our grid item 171
to start where it's meant to start and then span as many columns as we specify, right here. 172
Now, as you can imagine, there is a corresponding property called grid-row, which allows you to set 173
the grid-row-start and the grid-row-end so that you can say how many of these vertical cells you want 174
your grid item to span. 175
So now that we've seen how we can occupy more than one cell in our grid and position it based on the 176
start and end line numbers to achieve this first part of the layout. 177
The next step is to lay out this green div. 178
It might be a little bit more tricky than you would expect because this second div, if we look at the 179
HTML, should be positioned immediately after this cowboy div. 180
If in this default setup, we go ahead and set this to also span 2 using grid-column. 181
Then in that case it's actually just going to stay right here because there are no more columns left, 182
and by default, it's going to start right after the previous div from here. 183
Then this is the layout that we're going to end up with. 184
So one way we can fix this is by using another property called "order." Similar to flexbox, 185
each of the grid items inside a grid container by default have an order of 0. 186
They're all zero, so they're all equal If we elevate or promote the order of one item. 187
So if this one becomes one and these are all by default, 0, then that means this one is going to 188
be the rightmost or the bottom most in that grid. 189
So now this gets shifted all the way to the end and it's as if we've placed this div down here. 190
It doesn't really matter if you set the order to 1 or 100, it's all relative. 191
If everything else is 0, as long as it's greater than 0, it's going to go to the end of the 192
grid. 193
But if you, for example, had maybe an order of 2 and then this one had an order of 5, then this 194
one has to be greater than 5 in order to go into this position. 195
And the direction goes from left to right and then top to bottom in this way. 196
Now that we've learned how we can make this item have a higher order than the other items, and we've 197
positioned it now into this bottom cell, it's time for you to do the next exercise, which is make 198
it occupy two horizontal cells to be positioned directly under the blue div to look something like this. 199
Open up exercise Number 2 and go ahead and show it as the preview. 200
Then update the code for the astronaut div so that it looks like this image, 201
goal2. Pause the video and complete this challenge. 202
All right, So let's make the astronaut box look like the one in goal 203
Number 2. 204
We've already changed the order, and we've moved it from here, which is its default positioning based 205
on the HTML to here by making it a higher order number than anything else. 206
Now all we have to do is use that property we learned about previously, 207
grid-column and we can make it span 2, in order to take up two of the columns inside our grid. 208
So now it's positioned directly under our previous Blue Div and we're getting one step closer to that 209
layout that we were looking for. 210
Now, some of you might have realized that there's actually another way that you could create this positioning, 211
which is instead of using the order property to change the order of that green astronaut div, we could 212
actually simply just define all of its positions so we could say that it should start columnwise at 213
column Number 1 and it should end columnwise at column Number 3. 214
And then we could use the grid-row to say that it should start at row Number 2 and it should end at 215
row Number 3. 216
So now we've basically given it the exact coordinates for how to position this grid item and it will 217
go in there even if we don't change the order. 218
As you can imagine, there's probably also a shorthand for these four properties. 219
And instead of writing each of these out individually, which is a lot of typing, we can just use the 220
single shorthand property of "grid-area" to specify it. 221
Now the order is important. 222
We have to add four values separated by forward slashes and the first value corresponds to the 223
grid-row-start. 224
This is number one, which is 2 and 2 as you can see. 225
The second one is the grid-column-start. 226
Right here. 227
And the third one is the grid-row-end. 228
And the last one is the grid-column-end. 229
And this creates a four coordinate layout that pens in our grid item. 230
Now, one thing that's important to keep in mind when you're using grid area is if you're going to use 231
grid area on a particular item, 232
for example, this one, if you want the rest of the layout to behave as expected, they all need to 233
use grid area. 234
Now that we've seen how we can lay out the items using grid-column or grid-row and adding a span for 235
how many columns or rows it should span, we've seen how we can use grid area or the order property 236
to position items as well. 237
It's time to figure out how we can position this and to test you in an exercise. 238
The goal is to add some code into this "book div" to make this layout look like the goal3 image. 239
Making that orange div occupy the entire two vertical rows and you're going to do this using the 240
grid-row property. 241
Pause the video and see if you can complete this challenge. 242
All right. 243
So as we mentioned when we talked about grid-column, there is the corresponding grid-row. 244
We can change the grid-row so that it spans two rows. 245
We write span 2, and then it's going to take up the two rows. 246
And now we have our layout that we wanted. 247
Now, you might have done this differently using grid area so we could have started the area from a 248
row Number 1 all the way until row Number 3 or row -1, which is to the end and start at 249
column Number 3 and end at column Number 4 or also the last column. 250
We could have done it like this. 251
So there's multiple ways of doing this, but I think this is probably the most straightforward. 252
Take a look at solution number three to see if one of your solutions matches. 253
The final thing I want to show you is one of the biggest differences between Grid and Flexbox is Grid 254
actually lets you overlay items onto other items. 255
Notice how in this case you can see this orange box is actually sitting on top of the green and blue 256
boxes. 257
And we can do this by simply positioning items on top of each other in the grid. 258
The code for this might look something like this. 259
Notice firstly, I've given this book div a transparency of 80. So when we're using hex codes, the 260
first six characters correspond to the color, so the amount of red, green and blue, 261
and then finally we can add a value for what's called alpha, which is just how much transparency there 262
is. 263
80 basically is about 50% transparency. That allows us to see through the orange and the blue and the 264
green. 265
Once we've done that and I've laid out the grid area so that it actually overlaps it. 266
So here we're starting at row Number 1 and column Number 2, and then we're continuing until row 267
Number 3 and column Number 4. 268
Then we have this large area defined which actually overlaps the first div and also the second div. Simply 269
by positioning this book element on top of the other two, 270
we've actually created an overlapping layout and this is one of the coolest things about Grid, where 271
it has flexible positioning and it's really easy to put things on top of each other, around each other, 272
line things up straight, and as you'll see, it's just really, really helpful for creating complex 273
layouts. 274
Now that we've completed our tutorial, it's time for you to try an exercise. 275
And similar to Flexbox Froggy, the creator of Flexbox Frog Thomas Park, also created a cool game 276
called Grid Garden. 277
If you head over to appbrewery.github.io/gridgarden, all one word, then you'll be able to see 278
the CSS grid game with all 28 levels. 279
Remember, you can change the language of the instructions here and you can also go between the different 280
levels, 281
but ideally you should be able to go from one all the way straight through to 28 and you'll be able 282
to use what you've learned about CSS grid to water your garden and poison the weeds. 283
Pause the video, have a go at that now, and once you're done, carry on to the next lesson where we're 284
going to create our final project for this section. 285
Enjoy and see you there.