From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

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

Position items on the grid

Position items on the grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Position items on the grid

- [Instructor] By now, you've already seen me place items on grid several times, but this time we're placing items in repeated grids. So it's worth covering one more time. First, I'll visualize my grid so I can see what's going on. Then, I want the month and date to take up the entire first column, so both row one and two. I want the title to take up the second column and I also want to align it to the left and I want the meta content to also take up the second column in row two, and that should also align to the left. Finally, I need to realign these pieces of content vertically, so that the title jams to the bottom line here and the meta content jams to the top, that way, everything gets vertically-centered. And, while I'm at it, I might as well get rid of the padding on the left and the right-hand side, because we don't need it and you'll see that padding is sitting in the anchor element. So, I'll do that first, Card A, padding zero. Then I need to target the grid items and back in…

Contents