2.2 Aligning Grid Tracks and Grid Items

CSS Grid has some fantastic options when it comes to aligning. You can align Grid tracks, but also Grid items. Let's start with Grid items. You can align these inside their Grid cells both horizontally and vertically. Here are the properties that you can use. So we're back here in code pane, I have a simple demo set up. I have a container, display Grid, and I'm setting explicitly two columns, one row. And I'm also setting the height of the implicit rows to 200 pixels. So to align the items horizontally, you need to use the justify-items property. So you'll say justify-items and you will do this on the parents Grid Container and we have a couple of values to choose from start and center and stretch. Now, stretch is what you see right here by default, it basically stretches the items to completely fill the Grid cell. But let´s say for example that I say start, okay? Start will basically align the Grid items inside their cells to the left, okay? So here´s one of my columns, that´s 150 pixels and 150 pixels like this. And inside I'm aligning these items to the left. And right now they don't have the stretch behavior anymore, instead they're resized to fit the content inside. Center, basically align these to the center of my columns. And we'll align them to the right side, and stretch was the default behavior, so let's keep this at center. Now, you can also align these vertically using align items, so align-items. It has the exact same set of values as justify-items. So I can say start and they're gonna be aligned at the top. I can say center, that's gonna be aligned at the center and that's gonna be at the bottom. And stretch was the default behavior. Let's keep these at end. So justify-items will align them on the row axis or horizontally, align-items will align them on the column axis or vertically. Now, you can also use a shorthand for both properties. And that shorthand is called place-items. And place items takes the value of align-items and then the value of justify-items. So I can say end center, and it's gonna be exactly the same as using these two, as you can see the results are exactly the same. The problem with place-items is that it does not work in Edge. So if you're gonna support Edge, you're gonna have to use these two items. Now using these properties on the Grid Container means every single item inside that Grid Container is gonna receive the exact same alignment. But Grid offers us the ability to align items individually by using two properties called justify-self and align-self. So in the HTML, I have my third Grid item, which is this. It has an id of self, so let's position that independently from all the others. So I'm gonna target self, and to align this horizontally, I'm gonna say justify-self. It uses the exact same properties as before, start and center or stretch. So if I do start, it's gonna be self-aligning to the left. Center is gonna be to the center and it's gonna be self-aligning to the end. To align it vertically, you would use align-self and let's set this to center. And if you want a shorthand, there is place-self, which is basically align-self and then justify-self so you would say center end and it does the exact same thing as these two. Again, place-self does not work in Edge. And finally, what if we want to align the actual Grid tracks in relation to the Grid container? Well, we can do that with the following properties, justify-content. And this receives a slightly different set of possible values. We have start and center stretch, space around, space between, and space evenly, okay? So justify-content start will basically align all Grid tracks to the left, center will center all of the grid tracks. And please be aware that my Grid container has the fool width of my view-port here. So if I do justify-content and that's gonna align basically my Grid tracks to the right side. And that's for horizontal alignment. We can also use align-content to do a vertical alignment, right? So if I say align-content and, that's gonna align it at the very bottom. And because I don't have enough vertical space, this is kind of cut off right here. But I can do align-content center, and it´s gonna be exactly in the center, and I can do start, which is actually the default and it starts at the very top. You can also use, let´s say do center here, I can also use place-content as a shorthand for both of these. And it takes align-content and justify content, and merges them into one single property, again, this does not work in Edge. Now, I mentioned some properties earlier, space-around, space-between, space-evenly. Well, let me show you how these work, for example, on the horizontal axis. If I do space-around, these will space the tracts so that they have an equal amount of space around them. So you'll notice that the space that I have here on the left is the same that I'm gonna have here on the right, and the same goes for the second track. The space between will basically position one row or in our case one column, on the left and one on the right, and the remaining available space will be in the center. This depends on how many tracks you have, in our case we have two columns. But if I change my Grid to be three columns, you will see that it behaves differently. Essentially, the spacing between these tracks is equal, that's what space between is doing. And finally, space evenly will basically create the same amount of space between the columns and the edges of the document. And that's it for aligning Grid items and Grid tracks. As a quick recap, there are three categories of properties that you need to be aware of. Justify-items or the properties that end with items, that means justify-items, align-items, and place-items. Those will affect the Grid items, okay? Then you have justify-align and place-self, that will affect a single Grid item. And then you have justify-align and place-content, will affect the grid tracks, okay? Now, justify dash, a certain property will affect everything on the horizontal line. Align dash, the name of the property will affect everything on the vertical line. And place dash, will basically combine align and justify. It might seem here a bit hard to remember but when you start using these more and more, you'll get the hang of it. Now, in the next lesson, I'm gonna show you how to work with Grid template areas. Pretty cool feature, so I'll see you there.