Replicating a Netflix Homepage Module with CSS Grid

How Does It Work?

In this breakdown we’ll cover:

• the HTML wrappers;
• achieving the three layouts—
  • single-column
  • three-column
  • three-column with the <a> button next to the <h2>;
• swapping the order of the <img> and <h3> elements (and why);
• and the convenience of a collapsing row.

The HTML Wrappers

Before I explain how the layout works, take a gander at the HTML to become familiar with its structure. In particular, note that there are only two wrappers. They are:

• <div class="netflixContainer">...</div>
• <div class="netflix">...</div>

Moving forward, I’ll refer to them as .netflixContainer and .netflix, respectively.

The .netflixContainer wrapper has only one purpose: to display the black background across the full width of the page, no matter how wide the viewport.

Meanwhile, .netflix is the Grid container, and it is centered horizontally within .netflixContainer. It’s width value (80% or 63% depending on the viewport size) prevents it from becoming as wide as its parent. With the width set, the centering is achieved by setting it’s left and right margins to auto.

What about individual column wrappers—won’t we need those? Nope! Thanks to Grid, we can keep our HTML tidy and semantically rich, and still achieve this multi-column layout.

Let’s find out how.

Note: Please see the comment at the beginning of the HTML about why I largely eschewed classes for this example, and why I used <h2> and <h3> instead of <h1> and <h2>.

The Single-Column Layout

In keeping with mobile-first principles, we’ll start with the narrowest layout and work our way up.

We begin by declaring our grid:

.netflix {
  display: grid;
  /*
  I could explicitly declare it a one-column grid, but it isn’t required.
  grid-template-columns: 1fr;
  */
}

Placing the images before their subheads

<!-- Feature 1 -->
<h3>...</h3>
<img src="img/netflix-ipad.png" alt="..." />
<p>...</p>

Typically I wouldn’t use Grid for a single-column layout—I’d just let the content flow vertically naturally. But in this case, I wanted to improve the HTML source order (Fig 2) a bit by having each <h3> come before its corresponding <img> (to specify that the image falls under the subhead semantically) while displaying after it.

This is possible because Grid makes it trivial to reorder content. I think it’s OK to reorder content in this case, however, don’t abuse this power—it can introduce accessibility issues. (The O-in-O pattern has more about this.)

But we haven’t reordered those items yet, so currently the content is in the same order as its HTML source. Specifically, each child of .netflix is now a grid item, occupying a row each by default:

Note that I did not specify the number of rows (or columns, for that matter) in Fig 1. I could have stated grid-template-rows: 11 (for one row per child of .netflix) to define the rows explicitly, but in absence of that, Grid auto-places them for us in the same manner.

A quick side note: I’ve set vertical margins on some of the items elsewhere in the CSS, so that’s why Fig 3 shows extra space between the red button and the first heading, and below the text that sits in row 5.

Now we’re ready to reorder each image:

.netflix img:nth-of-type(1) {
  grid-row: 3; /* was in row 4 */
}

.netflix img:nth-of-type(2) {
  grid-row: 6; /* was in row 7 */
}

.netflix img:nth-of-type(3) {
  grid-row: 9; /* was in row 10 */
}

This places each image in the row that its corresponding <h3> occupied in Fig 3. By doing so, Grid now auto-places each of those headings in the next available row, which is the one formerly occupied by its <img>. In other words, the headings and images swap rows on the grid:

Centering the button (the link)

The last thing we need to do is center the <a> button horizontally. The text in the button—as well as other text on the page—is already centered via text-align: center, but the button itself is flush-left (Fig 4).

We can center it horizontally in its grid cell:

.netflix a {
  justify-self: center;
}

That gives us this:

That completes the single-column layout!

Switching to the Three-Column Layout

@media (min-width: 56.3125rem) {
  .netflix {
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 37px;
  }
}

Netflix switches the features to three columns when the viewport is at least 901px wide, so I made my version do the same. (I used the rem unit type instead of px in the media queries.) I’ll break it down over a few steps.

First, we redefine our grid so it has three columns of equal width with a little gap between each (Fig 6).

That yields a bit of a mess because we haven’t said where the items should go except for the images, which we placed in rows three, six, and nine earlier. So Grid auto-places the remaining items—one by one—across row one until it runs out of columns, and then it continues in the second row, and so on.

Fortunately, it’ll only take a few lines to clean it up. We’ll begin by making the module’s main heading and button span three columns each:

@media (min-width: 56.3125rem) {
  ...
  .netflix a,
  .netflix h2 {
    grid-column: 1 / span 3;
    /* Any of these would also work:
        grid-column: 1 / -1;
        grid-column: span 3;
        grid-column-end: span 3;
    */
  }
}

As with earlier, the space below the button is coming from a margin-bottom setting made elsewhere in the CSS.

All that remains is to place the images, subheads, and blurb paragraphs in consecutive rows:

@media (min-width: 56.3125rem) {
  ...
  .netflix img:nth-of-type(1n) {
    /* Although we’re assigning the same row to 
    all imgs, :nth-of-type is required to match 
    the specificity of when we reorderd the imgs. */
    grid-row: 3;
  }

  .netflix h3 {
    grid-row: 4;
  }

  .netflix p {
    grid-row: 5;
  }
}

I’ve been leveraging Grid’s auto-placement algorithm extensively for this makeover, and it was especially handy here. Nine CSS rules instead of three would have been required if we had to explictly place each item in a row-and-column slot. Instead, because’s Grid default behavior for auto-placement is to run horizontally, it automatically placed each <img>, <h3>, and <p> across the rows we specified.

Here is the result:

Modifying the Three-Column Layout

When the page is a little wider, the layout changes one more time. The main difference is a slight variation on the previous layout: the main heading and button share the same row. (The grid-column-gap also increases, but that isn’t as noteworthy.)

The heading, which previously spanned three columns, needs to span two to make room for the button. Then we can place the button next to it. As in Fig 8, there are a few ways to achieve the same result, but I’ve opted again for the slightly longer syntax below for clarity:

@media (min-width: 61.9375rem) {
  .netflix h2 {
    grid-column: 1 / span 2;
  }

  .netflix a {
    /* spans 1 column by default */
    grid-column: 3;
  }
}

Again due to Grid’s auto-placement, we didn’t have to specify grid-row: 1 for them (but we could for the same result). As expected, they’re both in row one now:

The convenience of a collapsing row

If you look closely at Fig 10, you might wonder what happened to row two. After all, the grid line markers that Firefox’s Grid Inspector shows on the left side jump from “1” to “3.”

Here’s what’s going on. Remember, we told Grid to place the images in row three, the subheads in row four, and the paragraphs in row five. With the button in row one now, there is no content for row two, so Grid collapses it. If you look even closer at Fig 10, you can see what appears to be another grid line marker behind the “3” on the left. That’s the obscured “2” marker. (And once again, the space below the button is from a margin, not row two.)

To be clear, though, if at some point we had defined a height for row two, it would take up that defined space even if the row didn’t have any content—but we never gave row two a height.

In our case, it’s really convenient of Grid to essentially ignore row two because it saves us the trouble of having to reposition the items from rows 3–5 to rows 2–4 after moving the button to row one.

One final tweak

Lastly, we want the heading and button to stick outside the edges just a bit. There are a few ways we can do this. Here’s one:

@media (min-width: 61.9375rem) {
  ...

  .netflix h2 {
    ...
    transform: translateX(-15px);
  }

  .netflix a {
    ...
    justify-self: end;
    transform: translateX(15px);
  }
}

Finis!

And that completes this makeover. Thanks, and see you next time!