---
id: 5a94fe7769fb03452672e463
title: Use Media Queries to Create Responsive Layouts
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
---
## Description
CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.
In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.
## Instructions
When the viewport width is 400px
or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.
## Tests
```yml
tests:
- text: When the viewport is 400px
or more, container
class should have a grid-template-areas
property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
testString: assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), 'When the viewport is 400px
or more, container
class should have a grid-template-areas
property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');
```
## Challenge Seed
```html
header
advert
content
footer
```
## Solution
```html
header
advert
content
footer
```