.cards { display: grid; gap: 16px; }Any two neighbouring cards are separated by 16px.
LESSON 64 OF 100
Separate tracks with gap
Add an even interval between grid cells.
STEP 1 · LEARN
How it works
gap defines the space between Grid rows and columns. It separates tracks without adding outer space around the container.
.cards { display: grid; gap: 0; }A zero value does not create the requested visual separation.
STEP 2 · APPLY
Your exercise
Enable Grid and add a 16px gap.
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 gap between tracks is 16px.
- ○The target element is present in the page.
Explain the solution logic
display creates the Grid context, while gap applies spacing only between its tracks.