CSS Academy · درس

الخطوط المسماة ومناطق Grid المسماة

سمِّ خطوط Grid ومناطقه للحصول على توزيع Grid أوضح وأسهل في الصيانة

الدرس 1 من 413 خطوة

الخطوط المسماة ومناطق Grid المسماة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

تسمية خطوط الشبكة

يمكن تسمية خطوط الشبكة داخل أقواس مربعة في grid-template-columns وgrid-template-rows. وتجعل الخطوط المسماة شيفرة التموضع أكثر قابلية للقراءة من استخدام الأرقام المجردة.

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

وضع العناصر باستخدام الخطوط المسماة

استخدموا الخطوط المسماة في grid-column وgrid-row لجعل التموضع أكثر وضوحًا:

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

أسماء الخطوط مع ‎-start و‎-end

عند تعريف مناطق مسماة باستخدام grid-template-areas، ينشئ CSS تلقائيًا خطوطًا مسماة باللاحقتين -start و-end يمكنكم الرجوع إليها.

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

تكرار الخطوط المسماة

عند استخدام repeat()، يمكنكم تضمين الأسماء داخل النمط المكرر. وتحصل الخطوط على لاحقات رقمية لمنع الالتباس.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

الامتداد بين الخطوط المسماة

استخدموا الخطوط المسماة مع span للامتداد عبر عدد محدد من المسارات المسماة:

  <div class="grid">
    <div class="header">Header spans 3</div>
    <div>A</div><div>B</div><div>C</div>
  </div>

مراجعة المناطق المسماة

تُعد المناطق المسماة (باستخدام grid-template-areas) الأسلوب الأكثر قابلية للقراءة لوضع العناصر:

  <div class="page">
    <header>Header</header>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
  </div>

الخطوط المسماة للتخطيطات المعقدة

تتألق الخطوط المسماة في التخطيطات التحريرية المعقدة التي تضم عناصر متعددة ممتدة:

  <div class="magazine">
    <div class="full-bleed">Full bleed banner</div>
    <div class="article">Article content</div>
  </div>

الجمع بين الأسماء والأرقام

يمكن المزج بحرية بين الخطوط المسماة وأرقام الخطوط في الشبكة نفسها:

  <div class="layout"><div class="item">Item</div></div>

أسماء متعددة على خط واحد

يمكن أن يحمل الخط الواحد عدة أسماء — وهذا مفيد عندما يؤدي الخط دور نهاية منطقة وبداية منطقة أخرى في الوقت نفسه:

  <div class="grid">
    <div>Sidebar</div>
    <div>Content</div>
  </div>

الخطوط المسماة الضمنية من المناطق

إذا عرّفتم منطقة مسماة باسم "main"، فسيُنشئ CSS تلقائيًا الخطوط main-start (للأعمدة والصفوف) وmain-end، مما يتيح استخدامَها مع العناصر المتراكبة.

تصحيح أخطاء الخطوط المسماة في DevTools

يمكن لأدوات DevTools في Chrome وFirefox عرض خطوط الشبكة المسماة كعناوين على التراكب. فعّلوا عناوين الخطوط في لوحة Layout للتحقق من صحة الأسماء.

اختبار سريع

عند تعريف منطقة شبكة مسماة باسم "sidebar" في grid-template-areas، ما أسماء الخطوط التي تُنشأ تلقائيًا؟

أجب عليها في الدرس التفاعلي

مراجعة

سمّوا خطوط الشبكة داخل أقواس مربعة في تعريفات المسارات لتسهيل التموضع. وتنشئ المناطق المسماة تلقائيًا أسماء خطوط باللاحقتين -start و-end. ويمكن أن يحمل الخط الواحد عدة أسماء. كما يمكن الجمع بحرية بين الخطوط المسماة وspan والأرقام. استخدموا DevTools لتصوير الخطوط المسماة كتراكبات.

البدء مجانًا

تعلم CSS مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «الخطوط المسماة ومناطق Grid المسماة» مجاني؟

نعم — نص درس «الخطوط المسماة ومناطق Grid المسماة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «الخطوط المسماة ومناطق Grid المسماة»؟

سمِّ خطوط Grid ومناطقه للحصول على توزيع Grid أوضح وأسهل في الصيانة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الخطوط المسماة ومناطق Grid المسماة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy