.cards { display: grid; grid-template-columns: repeat(2, 1fr); } .featured { grid-column: 1 / span 2; }The featured card occupies the width of both columns.
LESSON 66 OF 100
Span an item across two columns
Make a featured card occupy both grid columns.
STEP 1 · LEARN
How it works
grid-column is shorthand for an item’s start and end lines. 1 / span 2 starts at line one and spans two column tracks.
.featured { grid-column: 1; }One line sets only the start and does not request spanning two tracks.
STEP 2 · APPLY
Your exercise
Create two columns and span .featured with 1 / span 2.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The cards use Grid.
- ○The container has two columns.
- ○The featured card spans two columns.
- ○The target element is present in the page.
Explain the solution logic
The container defines two tracks, and grid-column on the child sets its span without moving the HTML.