Align Content by Adding Styling to a CSS Grid Layout
One thing you can't escape when styling is centering content. It's going to happen even if you use CSS Grid!
We can define grids within grids, which will allow us to align our items within an area. We'll use align-items and justify-items to get this done!
Lesson Challenge
Which axis does "justify" refer to? What is the keyword that refers to vertical position?
Instructor: [0:00] When we talk about web design, one thing we can never get away from is alignment of content. We want to center things, left align, right align, but mostly, we just want to center things. With CSS Grid, there's a way to center things.
[0:13] Let's start with the y-axis aligned. Officially, the vertical line is called the block access. For this, use align-item. Let's test this out in the content grid item. First, we have to turn this grid area into a grid. Yes, you can have grids inside other grids.
[0:30] We're basically making the content inside the content grid area into grid items themselves. Now, we can set the y-axis alignment, by using align-items. We'll start with align-items: end, which will bring the text to the bottom of the grid, align-items: center will center it, and align-items: start will bring it to the top. Let's keep the content text to the center.
[1:04] Now, let's look at aligning to the inline access, or the row access. For this, you use justify-items. Here, we can use start, center, and end as well. Keep in mind that there are quite a few other options, too. But to start, these three will serve you very well.
[1:21] Let's change the alignment of the header. We'll go to the header class and make this into a grid as well. Let's do justify-items: end, and that moves the items to the right, or to the end of the grid. When we do justify-items: center, the header is centered on the x-axis. Let's do justify-items: start, and that brings it to the start of the grid, or the left.