From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

The challenge

The challenge - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

The challenge

“

- [Morten] Card layouts are a staple of web design and simplify the process of displaying arrays of similar items in a visually pleasing and easy to understand and interact with way. The challenge of card layouts is we have to preserve the visual consistency of cards, even though they display different contents. In this chapter we'll switch focus from overall page layouts to component-level layouts by looking at some different card layouts and see how CSS Grid can help out. First, we'll look at some text-based cards with multiple pieces of information. Next, we'll build some cards that have text superimposed on top of images. And finally, we'll create an advanced dynamic grid-based card layout that displays various-sized cards in a structured way. We have a lot of ground to cover here, so let's go.

Contents