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.

Using the grid to stack grid items

Using the grid to stack grid items - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

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…

Contents