From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Using the grid to stack grid items - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Using the grid to stack grid items
- [Instructor] Here's how we're going to stack the figcaption on top of the image. First, we'll grab the figure element and turn it into a grid container. That turns the image element and the figcaption into grid items, and then we can just position each of these in the same cell. As a result, they'll stack one on top of another based on the HTML source order, so the image will be in the back, and the figcaption will be in the front, and this figcaption has a semi-transparent background, so you'll be able to see the image through this purple background. Here's what that looks like in CSS: First we grab the figure element, which has the class card, and set display: grid. Then we'll grab the two elements inside the card. You can do that by either saying card and then star or by targeting card image and caption. Then we set grid column one and grid row also one. Save that and go back in the browser. And the caption now stacks right on top of the image, and fills out all of the available…
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
-
-
-
-
-
-
-
(Locked)
The challenge48s
-
(Locked)
Overview of text-based card markup2m 10s
-
(Locked)
Create a grid for each card2m 21s
-
(Locked)
Position items on the grid4m 20s
-
(Locked)
Place the cards on a grid5m 17s
-
(Locked)
Overview of image-based card markup2m 21s
-
(Locked)
Using the grid to stack grid items2m 18s
-
(Locked)
Change the appearance of cards with flex5m 43s
-
(Locked)
Create different-sized grid items2m 10s
-
(Locked)
Create a complex magazine-style grid8m 43s
-
(Locked)
-
-
-