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

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

بدلاً من وضع العناصر باستخدام أرقام الأسطر، يمكنك تسمية أجزاء من شبكتك باستخدام الخاصية grid-template-areas. تُعد هذه الطريقة رائعة لإنشاء تخطيطات واضحة وسهلة القراءة، خاصةً عند العمل مع أقسام متعددة مثل الرؤوس والأشرطة الجانبية والتذييلات. ألقِ نظرة على المثال أدناه:

نعرّف حاوية باستخدام 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 لصفحة ويب أساسية تحتوي على المناطق التالية كما في الصورة أدناه:

عيّن الخصائص التالية للمحدِّد .container:

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

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

جرّب بنفسك

<!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>