From the course: Level Up: CSS Layout

Unlock this course with a free trial

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

Equal-height columns

Equal-height columns - CSS Tutorial

From the course: Level Up: CSS Layout

Start my 1-month free trial Buy for my team

Equal-height columns

“

(gaming music) - [Instructor] Whenever you need to place two or more items side-by-side in the layout, you typically want the height of each item in the layout to be the same, as you can see here. We call this type of layout an equal height column layout. In this challenge, you'll transform these three items which have three different lengths of content into an equal height column layout with maximum three columns. The columns should automatically wrap when there is insufficient horizontal space for all three columns, and the wrapped item should be either full width or equal width to the rest of the columns, your choice, to test the layout, change the viewport width, and ensure the wrapping works as intended. In the exercise files, you'll find a container with the class wrapper, and inside there are three child items with the class block. These contain different lengths of content. There's also some basic styling. This…

Contents