From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Aligning individual grid items

Aligning individual grid items - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Aligning individual grid items

“

- [Instructor] Next we're going to change the alignment of individual items on the grid. We're going to apply the style to the item, rather than the container. Justify-self aligns a grid item in its cell along the horizontal axis. You're overwriting whatever you set for the whole grid with justify items, and the values here are the same. In my exercise here, we're starting with justify items and align items, both set to stretch. So I'm going to add some CSS here for item two on line 17. And it's justify-self: stretch. Save, and it's default, so nothing changes. I'm gonna change that to start, save, and refresh. Now item two, and only item two, is aligned all the way to the left, the starting line of that cell. Change that to end, and refresh. It goes to the end of that cell. Center again puts it right there in the middle. Then I also have align-self, which does the same thing, but this time along the vertical axis instead of the horizontal axis. Similarly, you're overwriting whatever…

Contents