The Cover Design Pattern

The cover pattern is used to vertically center content within an element.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the Mastering CSS Layout course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Mastering CSS Layout

  • [00:00 - 00:03] Welcome back to everybody. And this is what we're going to talk about, the cover design pattern.

    [00:04 - 00:19] The covered design pattern is when you have an element that needs to fill the available space specifically in the vertical or the block direction. And then you want to center the content once again vertically centering in the block direction.

    [00:20 - 00:28] So here's an example. We have this box is taking up the entire container and then the contents is centered vertically.

    [00:29 - 00:39] We have it taking up content in the vertical direction and the contents are centered vertically. Now, just be clear, you could have things that are up at the top and the bottom of this.

    [00:40 - 00:50] But the main thing is that it's taking up the entire column and then there's content inside centered vertically. Let's come back to our application here.

    [00:51 - 01:07] And I want you to look for examples of where we are taking up content vertically and centering its content vertically inside of there. So we'll scroll through here just to get a chance to look through that, pause the video, take a look and then we'll be right back.

    [01:08 - 01:15] We have two examples of vertically centered content. And that's these two panels.

    [01:16 - 01:26] So this whole thing is a split pattern, but individually each panel is an example of a cover pattern. So that's the cover pattern.

    [01:27 - 01:31] Keep an eye out for it in the wild when you're serving the web and I'll see you on the next lesson.