Build the responsive page

Read first Task 30

Combine container, grid, sticky header and footer at three widths.

Task

At which width should a two-column grid usually start?

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

<!-- full page: header, grid of cards, footer -->

Syntax reference

<style>
  .grid{display:grid;gap:16px}
  @media(min-width:768px){.grid{grid-template-columns:1fr 1fr}}
</style>
<header><h1>AI CSA</h1></header>
<div class="grid"><div>Python</div><div>AI</div></div>
<footer><p>Faisalabad</p></footer>

Read it, then write it yourself. Copy-paste teaches nothing.

HTML & CSS 1 automatic check Layouts and responsiveness

Code editor Ctrl + Enter runs

<!-- full page: header, grid of cards, footer -->

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.

Checks on this task:

Check 1

One correct answer:

<style>
  .grid{display:grid;gap:16px}
  @media(min-width:768px){.grid{grid-template-columns:1fr 1fr}}
</style>
<header><h1>AI CSA</h1></header>
<div class="grid"><div>Python</div><div>AI</div></div>
<footer><p>Faisalabad</p></footer>

Track progress

0 of 56 tasks complete

Next task unlocks when every check passes.

← Previous

Next task (pass every check first)

Build the responsive page

Build the responsive page

Task

Why this works