Unit 3 · Stage 4

Article Cards

A front page needs more than one story. You will lay out three article cards side by side using CSS grid, a tool built for rows and columns. (pause on a highlighted word to see what it does)

1 A grid of stories

We added a <main class="articles"> holding three <article class="story"> blocks. CSS grid lines them up in even columns.

What this code means

display: grid: Turns the container into a grid of rows and columns. In Unit 2 you used flex for a row; grid is built for columns like a newspaper.
grid-template-columns: repeat(3, 1fr) makes 3 columns that each take one equal fraction of the width.
gap: The space between the cards.
margin and max-width: max-width stops the row from getting too wide, and margin: 0 auto centers it on the page.

Native youth in tech: three stories, side by side, each one about your community. You decide what news matters enough to make the front page.

2 The grid rule

Set the columns, the spacing, and center the whole block.

🎮 Try it: add an .articles rule with display: grid;, grid-template-columns: repeat(3, 1fr);, gap: 24px;, padding: 40px;, max-width: 1100px;, and margin: 0 auto; then press ▶ Run.

🤔 Quick check before you go on

What display value lays items out in rows and columns? Type it, then press Submit to unlock the next steps.

3 Style the cards

Give each story a white background and a thin border so it reads as a clean card on the newsprint page.

What this code means

background-color: white lifts each story off the cream page.
border: 1px solid #dddddd draws a thin gray outline around each card.

🎮 Try it: add a .story rule with background-color: #ffffff; and border: 1px solid #dddddd; then Run.

✓ Finish this stage

To complete Stage 4, your .articles needs display: grid and three columns. Press Check my work when you are ready. This opens Stage 5 and lets your teacher see that you finished.

YOUR CODE

PREVIEW