---
id: 5a94fe7769fb03452672e463
title: Use Media Queries to Create Responsive Layouts
challengeType: 0
videoUrl: ''
localeTitle: Использование медиа-запросов для создания адаптивных макетов
---
## Description
CSS Grid может быть простым способом сделать ваш сайт более отзывчивым, используя медиа-запросы, чтобы изменить области сетки, изменить размеры сетки и изменить порядок размещения элементов. В предварительном просмотре, когда ширина области просмотра составляет 300 пикселей или более, количество столбцов изменяется от 1 до 2. Область рекламы затем занимает левый столбец полностью.
## Instructions
Когда ширина области просмотра составляет 400px
или более, сделайте область заголовка 400px
верхней строкой полностью, а нижняя 400px
полностью занимает нижнюю строку.
## Tests
```yml
tests:
- text: 'Когда область просмотра составляет 400px
или более, класс container
должен иметь свойство grid-template-areas
в котором области нижнего колонтитула и заголовка занимают верхнюю и нижнюю строки соответственно, а объявление и контент занимают левый и правый столбцы средней строки.'
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
```js
// solution required
```