From the course: CSS: Advanced Layouts with Grid

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

What you're creating: A variable card layout

What you're creating: A variable card layout - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

What you're creating: A variable card layout

“

- [Instructor] CSS Grid shines for a lot of reasons that you've already seen. In this chapter, I want to show you a different sort of card layout using Grid. Instead of a very uniform layout like we saw in the previous chapter, this chapter focuses on a variable card layout. In this case, each individual card is a grid with a unique grid definition, and the overall layout for these cards is non-uniform. For instance, in this design you're seeing here, the first set of three cards has two cards taking up the first couple of rows and the first two columns, and the third card sits in that final column and spans two rows, and then the next set of three cards reverses this pattern. This in and of itself is interesting and takes more specific grid placement per item than we've seen so far. Beyond that, each card is a grid, and some of these grids share the same layout, while others do not. As we get deeper into the chapter, I'll show you how to create each of these grids to accomplish a…

Contents