CSS: Appearance

A simple page layout

Lesson 10 of 18 · About 20 minutes

Your goal: Arrange two related sections.

Learn

CSS Grid arranges children in columns. Start with a single column, then use a media query to add a second column when space allows.

View starter code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style>
      .sections {
        display: grid;
        gap: 20px;
      }
      section {
        background: #dbeafe;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <h1>My hobby</h1>
    <main class="sections">
      <section>
        <h2>Equipment</h2>
        <p>What I use.</p>
      </section>
      <section>
        <h2>Tips</h2>
        <p>How I practise.</p>
      </section>
    </main>
  </body>
</html>

Your challenge

Make the sections form two equal columns on screens wider than 650px. Add a gap.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox

Show a hint

Use grid-template-columns: repeat(2, minmax(0, 1fr)); inside the media query.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

.sections {
  display: grid;
  gap: 20px;
}
@media (min-width: 650px) {
  .sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

Check your work

The sections sit side by side on a wide screen, with a visible gap.

I tried the challenge and checked the result.

Completion is your own check, not an automatic grade.