---
id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template
challengeType: 0
videoUrl: ''
localeTitle: تقسيم الشبكة في قالب المنطقة
---
## Description
يمكنك تجميع خلايا الشبكة الخاصة بك معًا في منطقة وإعطاء المنطقة اسمًا مخصصًا. القيام بذلك عن طريق استخدام grid-template-areas
على الحاوية مثل هذا: شبكة قالب والمناطق:
"رأس الصفحة الرأسية"
"advert content content"
"footer footer footer" ؛
يدمج الرمز أعلاه الخلايا الثلاث العليا معًا في منطقة مسماة header
، والخلايا الثلاثة السفلية في منطقة footer
، ويجعل منطقتين في الصف الأوسط ؛ advert
content
. ملحوظة
تمثل كل كلمة في التعليمة البرمجية خلية ويمثل كل زوج من علامات الاقتباس صفًا. بالإضافة إلى التصنيفات المخصصة ، يمكنك استخدام نقطة ( .
) لتعيين خلية فارغة في الشبكة.
## Instructions
ضع قالب المنطقة بحيث تصبح الخلية المسمى advert
عبارة عن خلية فارغة.
## Tests
```yml
tests:
- text: ''
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "container
class should have a grid-template-areas
propertiy similar to the preview but has .
instead of the advert
area.");'
```
## Challenge Seed
## Solution
```js
// solution required
```