A mobile-first layout – CSS Exercise with Solution

Write a layout that starts simple and adds columns.

What to build

A grid with one column by default and two from 600px.

Requirements

.grid is a grid, with a gap of 16px, and no columns are set outside the query.
A media query with min-width: 600px sets grid-template-columns: 1fr 1fr on .grid.
h1 has a default font-size of 1.5rem, and 2rem inside the same query.

Constraints

Do not use max-width in a media query.

Example

See the syntax block in the lesson.

Why it works

Phones get the base rules only. Bigger screens get extra rules which are added on top.

Hints

Hint 1

The one-column layout needs no media query.

Hint 2

A media rule contains other rules.

Hint 3

Use min-width.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mobile first</title>
  <style>
    .grid { display: grid; gap: 16px; }
    h1 { font-size: 1.5rem; }
    @media (min-width: 600px) {
      .grid { grid-template-columns: 1fr 1fr; }
      h1 { font-size: 2rem; }
    }
  </style>
</head>
<body>
  <h1>Title</h1>
  <div class="grid">
    <div>One</div>
    <div>Two</div>
  </div>
</body>
</html>

Lesson: Responsive design basics →