---
id: 5a94fe7769fb03452672e463
title: Use Media Queries to Create Responsive Layouts
challengeType: 0
videoUrl: ''
localeTitle: استخدم استعلامات الوسائط لإنشاء تخطيطات متجاوبة
---
## Description
يمكن أن تكون CSS Grid طريقة سهلة لجعل موقعك أكثر استجابة من خلال استخدام استعلامات الوسائط لإعادة ترتيب مناطق الشبكة وتغيير أبعاد الشبكة وإعادة ترتيب موضع العناصر. في المعاينة ، عندما يكون عرض إطار العرض 300 بكسل أو أكثر ، يتغير عدد الأعمدة من 1 إلى 2. ثم تحتل مساحة الإعلان العمود الأيسر تمامًا.
## Instructions
عندما يكون عرض إطار العرض 400px
أو أكثر ، اجعل منطقة الرأس تشغل الصف العلوي تمامًا وتحتل منطقة التذييل الصف السفلي تمامًا.
## Tests
```yml
tests:
- text: عندما يكون منفذ العرض 400px
أو أكثر ، يجب أن container
فئة 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
```