Read first
Task 29
Footer layout
Footers stack on phones and split into columns from 768px.
Task
Which property creates the column gap in a footer grid?
The editor already contains a starting point. Change it until every check passes — the Next task button unlocks when it does.
What you start with
<style>
footer { display:grid; }
</style>
<footer><div>Links</div><div>Contact</div></footer>
Syntax reference
<style>
footer { display:grid; gap:24px; }
@media (min-width:768px){ footer { grid-template-columns: repeat(3, 1fr); } }
</style>
<footer><div>Links</div><div>Contact</div></footer>
Read it, then write it yourself. Copy-paste teaches nothing.
HTML & CSS
1 automatic check Layouts and responsiveness
Code editor
Ctrl + Enter runs
Run your code to see the output and the checks.
Your result
Submit your code to see results
Write your code in the middle column and press Run code.
Why this works
Checks on this task:
- Check 1
One correct answer:
<style>
footer { display:grid; gap:24px; }
@media (min-width:768px){ footer { grid-template-columns: repeat(3, 1fr); } }
</style>
<footer><div>Links</div><div>Contact</div></footer>
Track progress
0 of 56 tasks complete
Next task
Next task unlocks when every check passes.
Sign in to keep your code and certificates.
Next task (pass every check first)
Hint
Ask yourself: Which property creates the column gap in a footer grid?
Still stuck? Open “Syntax reference” in the left column, then type it yourself and change one value.