In the previous lesson, we looked at how to create our grids and how to size them.
In this lesson, we're going to talk about how to lay out items in the grid that we've created and how
to place them in the areas that we want.
Previously, we saw this layout when we said this is a really great layout to use CSS grid to create.
So let's use CSS grid to create this layout by learning about how we place items in our grid.
But before we do that, it's really important to define some of the terms that are used often in CSS
grid.
The first thing, if you remember, is we created a container that contains all of the items, and this
is usually a div and it's called the Grid container.
The items that are placed inside the grid are, as you would expect, called Grid items.
And when we create and size our grid, we create these rows and we create these columns.
Now, these are collectively known as Tracks.
We have our Row tracks and we have our Column tracks.
And we usually create and size these tracks using grid-template-rows or grid-template-columns. Within
the intersections of the tracks,
we create these small units which are called a Grid cell.
They are the smallest unit in a grid and they can be different sizes.
So this one, for example, is a little bit wider than this one, but they essentially sit between the
columns and the rows.
You can use multiple cells to create a grid item.
For example, in this case, we've actually positioned our grid item across two of our grid cells,
this one and this one.
And here we've created a grid item that is positioned vertically onto two of our grid cells.
And then the final piece of the puzzle are the lines that separate our tracks.
We have horizontal lines and we have vertical lines, and these are called the Grid lines because they
are essentially the grid lines.
And we can only control the grid lines by using that gap property to specify its height or width.
But we can't really change its color.
We can't really put anything inside the lines.
They are just that they are lines for layout.
With all of those things combined together in a grid, we've got our lines, we've got our tracks,
we've got our cells, we've got our container and we've got our items.
These are some of the most common words that you'll hear me say when we talk about grid and especially
when we're thinking about placement.
It's all of these things combined together that allow us to create these layouts using our grid.
Let's try and create that layout using actual code.
I've created a grid container and inside I've placed three grid items by creating three divs.
Now I'm going to update the CSS code for that grid container.
Make it use grid by setting display to grid.
In addition, I'm setting the height to 100vh.
Remember that by default a div is going to span the entire width of the window, but it's only going
to occupy as much vertical space as there is content,
but by setting the height of our container to 100vh, then it's also going to take that
container and make it stretch all the way down to the bottom of the window.
So now that we've got our grid container, we can create our tracks, and the tracks, if you remember,
are created using the grid template properties.
We're saying that there should be three columns.
The first two are about the same height as each other and the third one is a little bit wider.
And then we've said that there should be two rows of equal height. So something like this would get created.
So we've got our tracks, we've got our lines, we've got our container,
now, the items get placed in by default.
It will start from the first and it will go into each of the cells that are available.
This ".cowboy" will go into here.
The next one the ".astronaut" will go into here and the ".book" will take up the final cell.
This is before we specified any sort of positioning.
And the final thing that we've updated here is the gap.
We've said that this should be a 3rem gap.
We're saying that each of these lines should be 3rem thick, and that means that we don't have
to use padding or margin to separate the items in our grid.
And when we run all of this code, this is what we will see.
You'll notice the 3rem between each of the grid items.
You'll notice the ratio of the width of our column 1 : 1 : 1.5,
but you'll also notice that there's actually a whole track down here that's unoccupied because as I
mentioned, by default, our grid is going to lay out our items into the unoccupied cells, one item
per cell. Before we change that and create that layout
in the beginning,
I have a small challenge for you.
Wouldn't it be nice if the content of each of these item divs were actually centered properly like this?
And in order to do this, we're going to revise what you've learned about Flexbox.
Remember what I said
about how Flexbox is something that you're going to use with grid?
Grid doesn't replace Flexbox, and Flexbox is great for lining items in our layouts.
Go ahead and download the starting code, which is a zipped file called 10.2 Grid Placement,
extract it and open it up inside VS Code.
If we go ahead and show the preview, you'll see our three grid items and I've made the emojis a little
bit bigger to make it easier to see.
Now your goal is to make this website look like this, with each of the emojis horizontally and vertically
centered in our div.
And you're going to do that using Flexbox.
So have a think about how you can do this.
And if you need to go back to the previous module on Flexbox, look at Flexbox Layout and see if you
can figure this out.
Pause the video and complete this challenge.
All right.
So the first thing we're going to need to do is we're going to need to turn each of these divs into
a flexbox container.
And we'll do that by setting display to flex.
Now, once we've done that, the next step is to use the justify-content to set our content into the
center, and justify-content, if you remember, is along the main axis of our flexbox.
So when we said that this should be display: flex, we've essentially created a row-based flexbox with
just a single item in it, and we told it to justify itself into the center horizontally.
The next thing we need to do is to move this down to the vertical center, and we can do that using
the align-items property.
Let's set that to center and you can see how easily we've managed to center each of our text items inside
our div just by using Flexbox.
Flexbox provides one of the easiest ways to center an item inside another container.
And if we were doing this with floats or CSS or absolute positioning, it will be a nightmare, especially
when you want to change things and adapt your layout.
But as you can see, Flexbox working alongside Grid is super useful and makes it easy for us to create
any sort of layout that we desire.
These tools together work beautifully.
Hopefully you've managed to do that and you've got your emojis centered in the middle of the divs.
The next step is to try and create this layout that we said should be really easy and doable using grid.
Let's go ahead and lay out this first item, this cowboy emoji.
In order to do that, I'm going to set it apart from the other divs by giving it a blue background color.
And then I'm going to set a property called grid-column, and I'm going to set the value to "span 2".
Let's see what this does, first of all.
Now, you might remember this layout comes from our Chrome Developer Tool and we can switch it on in
order to see the lines and the tracks in our grid.
When I selected the cowboy div, this very first div and I set it to span two columns,
essentially what happens is it's going from track Number 1 all the way to track Number 3, and
it's bridging these two columns and that's what "span 2" columns does.
So it starts at the position where that div is supposed to be and this is the end result.
If you take a look inside the folder of the previous exercise, you'll see that we provided the code
for this demo.
Now, I'm a big believer in learning programming by playing around with code, so I recommend going
into the demo1.html.
seeing the code that we've added and then go ahead and click on Show Preview and we can view this layout
in our browser.
Now if you right-click on that div that we just laid out, you can see the grid by clicking on that
grid chip and you'll see these lines show up.
Now you can change the line color by selecting this box and we can make it a little bit darker to make
it easier to see.
Now, the other part that's really helpful about the Chrome Developer Tool is it actually shows you
the line numbers.
So you can see that the first one is line Number 1.
The second line is line Number 2, line Number 3 and line Number 4.
And this is really useful because there's another way of positioning our items.
If we go into our styles and select our first div, you can see we've set the grid-column to "span 2".
But if you notice there's a little triangle next to that property and when you click on it, you can
see that it's actually a shorthand property for two other properties where that item should start in
the grid-column and where that item should end in the grid-column.
Let's switch this off and actually add in those two properties.
So let's set the grid-column-start.
Let's say instead of the default where it starts at, where it would be placed normally in the first
cell, let's tell it to start from the second line.
So now you can see that div move over to start here.
And if we go ahead and specify the next property, which is grid-column-end, then we can say maybe
it should end at 4.
So now it's positioned starting from column number two, ending at column number four.
Another way to specify the last line in a grid is to use these negative values.
So if you look at the bottom, you can see all the negative values specified for each line.
So if we count from the right-hand side, then this line is -4.
This is -2, -3 and -4.
Let's say the grid-column should end at -1,
then it's going to extend to this last line.
And this minus one is really, really handy because if you had many, many columns and you're not quite
sure how many columns there are because maybe you created the grid dynamically or using code and it
extends itself automatically or something crazy like that,
you can always use -1 to specify the right-handmost line in the grid, and you can always use
the positive number one to specify the leftmost line in the grid.
These are just some really handy tips.
Now, in addition to -1, you can see there's also -2 and -3.
But I don't recommend using these because it very quickly gets confusing when you look at this at a
glance.
So I only recommend using -1 or maybe -2 if you really want to stretch it and using the
positive numbers the rest of the time.
Another thing to note here is you can actually start and end whichever direction you want.
So let's say that I wanted my grid-column to end from the second line and I set my start to line Number
4.
Then it's going to flip that and still take up these two columns.
It doesn't actually matter whether if your start is to the left of your end or if your end is to the
left of your start.
And you can even change this to span 2 and change the end to auto, which is the automatically initial
position of the div before you did any positioning.
So in this case it should be the first line.
And if we go ahead and expand our original grid-column: span 2, to the shorthand is exactly the same as
what we've done here.
It's important to remember that the grid-column property is actually short for two other properties,
and we could set each of these properties separately, or we can set it by using grid-column and
grid-column-span, and then a particular number, for example, span 2 is basically telling our grid item
to start where it's meant to start and then span as many columns as we specify, right here.
Now, as you can imagine, there is a corresponding property called grid-row, which allows you to set
the grid-row-start and the grid-row-end so that you can say how many of these vertical cells you want
your grid item to span.
So now that we've seen how we can occupy more than one cell in our grid and position it based on the
start and end line numbers to achieve this first part of the layout,
the next step is to lay out this green div.
It might be a little bit more tricky than you would expect because this second div, if we look at the
HTML, should be positioned immediately after this cowboy div.
If in this default setup, we go ahead and set this to also span 2 using grid-column,
then in that case it's actually just going to stay right here because there are no more columns left,
and by default, it's going to start right after the previous div from here.
Then this is the layout that we're going to end up with.
So one way we can fix this is by using another property called "order." Similar to Flexbox ,
each of the grid items inside a grid container by default have an order of 0.
They're all zero, so they're all equal. If we elevate or promote the order of one item,
so if this one becomes 1 and these are all by default 0, then that means this 1 is going to
be the rightmost or the bottom most in that grid.
So now this gets shifted all the way to the end and it's as if we've placed this div down here.
It doesn't really matter if you set the order to 1 or 100, it's all relative.
If everything else is 0, as long as it's greater than 0, it's going to go to the end of the
grid.
But if you, for example, had maybe an order of 2 and then this one had an order of 5, then this
one has to be greater than 5 in order to go into this position.
And the direction goes from left to right and then top to bottom in this way.
Now that we've learned how we can make this item have a higher order than the other items, and we've
positioned it now into this bottom cell, it's time for you to do the next exercise, which is make
it occupy two horizontal cells to be positioned directly under the blue div to look something like this.
Open up exercise Number 2 and go ahead and show it as the preview.
Then update the code for the astronaut div so that it looks like this image,
goal2. Pause the video and complete this challenge.
All right, So let's make the astronaut box look like the one in goal
Number 2.
We've already changed the order, and we've moved it from here, which is its default positioning based
on the HTML to here by making it a higher order number than anything else.
Now all we have to do is use that property we learned about previously,
grid-column and we can make it span 2, in order to take up two of the columns inside our grid.
So now it's positioned directly under our previous Blue div and we're getting one step closer to that
layout that we were looking for.
Now, some of you might have realized that there's actually another way that you could create this positioning,
which is instead of using the order property to change the order of that green astronaut div, we could
actually simply just define all of its positions so we could say that it should start columnwise at
column Number 1 and it should end columnwise at column Number 3.
And then we could use the grid-row to say that it should start at row Number 2 and it should end at
row Number 3.
So now we've basically given it the exact coordinates for how to position this grid item and it will
go in there even if we don't change the order.
As you can imagine, there's probably also a shorthand for these four properties.
And instead of writing each of these out individually, which is a lot of typing, we can just use the
single shorthand property of "grid-area" to specify it.
Now the order is important.
We have to add four values separated by forward slashes and the first value corresponds to the
grid-row-start.
This is number one, which is 2 and 2 as you can see.
The second one is the grid-column-start.
Right here.
And the third one is the grid-row-end.
And the last one is the grid-column-end.
And this creates a four coordinate layout that pens in our grid item.
Now, one thing that's important to keep in mind when you're using grid area is if you're going to use
grid area on a particular item,
for example, this one, if you want the rest of the layout to behave as expected, they all need to
use grid area.
Now that we've seen how we can lay out the items using grid-column or grid-row and adding a span for
how many columns or rows it should span, we've seen how we can use grid area or the order property
to position items as well.
It's time to figure out how we can position this and to test you in an exercise.
The goal is to add some code into this "book div" to make this layout look like the goal3 image.
Making that orange div occupy the entire two vertical rows and you're going to do this using the
grid-row property.
Pause the video and see if you can complete this challenge.
All right.
So as we mentioned when we talked about grid-column, there is the corresponding grid-row.
We can change the grid-row so that it spans two rows.
We write span 2, and then it's going to take up the two rows.
And now we have our layout that we wanted.
Now, you might have done this differently using grid area so we could have started the area from a
row Number 1 all the way until row Number 3 or row -1, which is to the end and start at
column Number 3 and end at column Number 4 or also the last column.
We could have done it like this.
So there's multiple ways of doing this, but I think this is probably the most straightforward.
Take a look at solution number three to see if one of your solutions matches.
The final thing I want to show you is one of the biggest differences between Grid and Flexbox is Grid
actually lets you overlay items onto other items.
Notice how in this case you can see this orange box is actually sitting on top of the green and blue
boxes.
And we can do this by simply positioning items on top of each other in the grid.
The code for this might look something like this.
Notice firstly, I've given this book div a transparency of 80. So when we're using hex codes, the
first six characters correspond to the color, so the amount of red, green and blue,
and then finally we can add a value for what's called alpha, which is just how much transparency there
is.
80 basically is about 50% transparency. That allows us to see through the orange and the blue and the
green.
Once we've done that and I've laid out the grid area so that it actually overlaps,
so here we're starting at row Number 1 and column Number 2, and then we're continuing until row
Number 3 and column Number 4,
then we have this large area defined which actually overlaps the first div and also the second div. Simply
by positioning this book element on top of the other two,
we've actually created an overlapping layout and this is one of the coolest things about Grid, where
it has flexible positioning and it's really easy to put things on top of each other, around each other,
line things up straight, and as you'll see, it's just really, really helpful for creating complex
layouts.
Now that we've completed our tutorial, it's time for you to try an exercise.
And similar to Flexbox Froggy, the creator of Flexbox Frog, Thomas Park, also created a cool game
called Grid Garden.
If you head over to appbrewery.github.io/gridgarden, all one word, then you'll be able to see
the CSS grid game with all 28 levels.
Remember, you can change the language of the instructions here and you can also go between the different
levels,
but ideally you should be able to go from one all the way straight through to 28 and you'll be able
to use what you've learned about CSS grid to water your garden and poison the weeds.
Pause the video, have a go at that now, and once you're done, carry on to the next lesson where we're
going to create our final project for this section.
Enjoy and see you there.