المناطق المسماة

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 33 من 43.

بدلاً من وضع العناصر باستخدام أرقام الخطوط، يمكنك إعطاء أجزاء من شبكتك أسماءً باستخدام خاصية grid-template-areas. هذه الطريقة رائعة لإنشاء تخطيطات نظيفة وسهلة القراءة — خاصة عند العمل مع أقسام متعددة مثل الترويسات (headers)، والأشرطة الجانبية (sidebars)، والتذييلات (footers). تحقق من المثال أدناه:

نقوم بتعريف حاوية باستخدام CSS Grid ونستخدم grid-template-areas لإنشاء تخطيط مسمى:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

كل سطر من النص يشكل صفاً، وكل كلمة في السطر هي جزء من الشبكة. إذا قمت بتكرار كلمة، فستمتد تلك المنطقة عبر مساحة أكبر.

بعد ذلك، تقوم بمطابقة عناصر HTML الخاصة بك مع تلك الأسماء بهذا الشكل:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

قم بإنشاء تخطيط شبكة CSS (CSS grid layout) لصفحة ويب أساسية مع المناطق التالية كما هو موضح في الصورة أدناه:

قم بتعيين الخصائص التالية على محدد .container:

display إلى grid
grid-template-columns إلى 1fr 3fr
grid-template-rows إلى auto 1fr auto
grid-template-areas إلى:
"header header"
"profile main"
"footer footer"

قم بتعيين كل عنصر إلى منطقته الخاصة. على سبيل المثال، بالنسبة لـ .header قم بتعيين grid-area إلى header.

ورقة مرجعية

استخدم grid-template-areas لإنشاء تخطيطات شبكية مسماة:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

يمثل كل سطر من النص صفاً، وكل كلمة في السطر هي جزء من الشبكة. تكرار الكلمة يؤدي إلى تمديد تلك المنطقة عبر مساحة أكبر.

قم بتعيين العناصر إلى مناطق الشبكة باستخدام grid-area:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.