From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Position items on the grid - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
The challenge48s
-
Overview of text-based card markup2m 10s
-
Create a grid for each card2m 21s
-
Position items on the grid4m 20s
-
Place the cards on a grid5m 17s
-
Overview of image-based card markup2m 21s
-
Using the grid to stack grid items2m 18s
-
Change the appearance of cards with flex5m 43s
-
Create different-sized grid items2m 10s
-
Create a complex magazine-style grid8m 43s
-
-
-
-