Summary - Magazine layout

Build a magazine layout with grid-template-areas.

Summary: Magazine layout

In this summary you'll combine four concepts to build a magazine layout: use grid-column to span items across columns, grid-row across rows; define named regions with grid-template-areas; place items into them with grid-area.

In the final step you'll set every region of the .magazine grid in a single declaration. This is the skeleton of real-world magazine pages.

Magazine columns with minmax

In a magazine layout column widths are usually flexible: they shrink on small screens and open up on wide ones. minmax(200px, 1fr) keeps each column at least 200px and shares leftover space when available.

Used as grid-template-columns: repeat(3, minmax(200px, 1fr)), the grid narrows down to 200px columns and never grows beyond the share.

Exercise Build the magazine grid

Define four regions in the .magazine grid: header, hero, aside and footer. Each region is written twice on one row (2 columns). Four rows in total. Write only the grid-template-areas declaration.

Show example solution

.magazine {
  grid-template-areas:
    "header header"
    "hero hero"
    "aside aside"
    "footer footer";
}

Test yourself

The magazine hero should span 3 columns. Which declaration?
```
.hero {
  /* ? */
}
```
- grid-template-columns: 3
- grid-row: 1 / span 3
- grid-column: 1 / span 3
- grid-area: 3
Show answer

grid-column: 1 / span 3 — Correct. grid-column spans columns; 1 / span 3 stretches across three.

Place the footer into its region

.footer {
  grid-area: ____;
}

Show answer

.footer {
  grid-area: footer;
}

Match each concept to its role

grid-column

Placement across column lines
grid-row

Placement across row lines
grid-template-areas

Named region definition
grid-area

Place item into a region
minmax()

Flexible size function

Next lesson: Viewport meta

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies