From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Stacking elements using grid

Stacking elements using grid - CSS Tutorial

From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Start my 1-month free trial Buy for my team

Stacking elements using grid

“

- [Instructor] Let's talk about one of the most game-changing features of CSS grid. I'll give you a hin, it's not just about rows and columns. The grid module allows us, for the first time, to lay out content in the depth dimension, literally stacking elements on top of each other in the same grid space to create layouts that were previously impossible without a whole lot of extra markup or hacky things. So here I've got an example in action. I've got this basic figure element, and it contains an image and a figcaption. Inside of this figcaption, we've got a blockquote, a citation, and a paragraph. That's it. There's no extra divs, nothing fancy going on here. But visually, we've got an intricate, layered card with background elements, text overlays, and stylized accents, all precisely positioned and stacked using grid. Let's look at what's going on, and to make that a little easier to see, let me turn on the grid overlay for our card. So it starts by applying a grid to this figure…

Contents