Summary - Multi-column page

CSS course · Intermediate · Lesson 57/98

Build a responsive multi-column page layout.

Summary: Multi-column page

In this summary you'll combine five concepts to build a responsive multi-column page: mobile-first base styles, a responsive card grid with auto-fit, a flexible tag row with flex-wrap, hiding the side menu on mobile with display: none, and a print layout with @media print.

In the final step you'll write the print block so the printed output stays clean too.

The print layout of the page

When the multi-column page is printed, you hide menus, ads and forms; set the text color to black and the background to white. The @media print block keeps the printed output clean and ink-friendly.

Since the page is already built mobile-first, the print block holds only a few declarations: removing unneeded elements with display: none is enough.

Exercise Build the print block

When the multi-column page is printed, hide the .nav (menu) and .ads (ad) elements. Open an @media print block and remove both elements inside it with display: none.

Show example solution

@media print {
  .nav,
  .ads {
    display: none;
  }
}

Test yourself

Best method for the side menu on a narrow screen?
```
/* ? */
.sidebar { ____ }
```
- Copy desktop styles to mobile
- Always show the side menu
- Hide it with print styles
- Hide on mobile with display: none
Show answer

Hide on mobile with display: none — Correct. Hide with display: none on mobile; bring it back with display: block on wide screens.

Responsive card grid

.cards {
  display: grid;
  grid-template-columns: repeat(____, minmax(180px, 1fr));
  gap: 1rem;
}

Show answer

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

Match each concept to its role on the page

Mobile-first

Base styles for small screens
auto-fit + minmax

Responsive card grid
flex-wrap

Flexible tag row
display: none

Hide side menu on mobile
@media print

Print layout

Summary - Multi-column page