تخطيط الكأس المقدسة باستخدام Grid
نفّذ تخطيط الكأس المقدسة الكلاسيكي، مع ترويسة وتذييل ومحتوى رئيسي وشريطيْن جانبييْن باستخدام CSS Grid.
تخطيط الكأس المقدسة باستخدام Grid درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما تخطيط الكأس المقدسة؟
تخطيط الكأس المقدسة هو نمط كلاسيكي لتصميم الويب: صفحة بارتفاع كامل تحتوي على رأس وتذييل وقسم أوسط مكوّن من ثلاثة أعمدة، هي شريط جانبي أيسر ومحتوى رئيسي وشريط جانبي أيمن. كان تنفيذ هذا التخطيط باستخدام العوامات صعبًا للغاية، أما CSS Grid فيجعله سهلًا جدًا.
تعريف قالب Grid
حدّد التخطيط باستخدام مناطق القالب والصفوف المسماة: إذ يربط grid-template-areas البنية المرئية. وتلتقط ثلاثة أعمدة وثلاثة صفوف، بحيث يمتد الرأس عبرها جميعًا ويمتد التذييل عبرها جميعًا ويتكون الوسط من ثلاثة أعمدة، التخطيط بأكمله في مخطط ASCII سهل القراءة.
<header>Header</header>
<div class="sidebar">Sidebar</div>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>إسناد العناصر إلى المناطق
يشير كل عنصر فرعي إلى منطقته باستخدام الاسم: header { grid-area: header } وmain { grid-area: main } وnav { grid-area: sidebar } وaside { grid-area: aside } وfooter { grid-area: footer }. ويضع Grid هذه العناصر تلقائيًا.
تمدد الصف الأوسط
يستخدم الصف الأوسط 1fr لملء كل ارتفاع إطار العرض المتبقي بعد الرأس والتذييل ذوي الارتفاع الثابت. ويضمن ذلك امتداد الأشرطة الجانبية والمحتوى الرئيسي دائمًا لملء إطار العرض، من دون الحاجة إلى حسابات ارتفاع صريحة.
الطي المتجاوب
على الأجهزة المحمولة، استخدم استعلامًا وسطيًا لإعادة تعريف grid-template-areas كتكديس في عمود واحد: الرأس، ثم الشريط الجانبي، ثم المحتوى الرئيسي، ثم aside، ثم التذييل عموديًا. يظل ترتيب DOM محفوظًا؛ ولا يتغير سوى قالب Grid المرئي. وتجعل مناطق Grid إعادة هيكلة التخطيط المتجاوب واضحة.
<header>Header</header>
<div class="sidebar">Sidebar</div>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>إخفاء الأشرطة الجانبية بشكل متجاوب
على الأجهزة اللوحية، أزل aside الأيمن ووسّع المحتوى الرئيسي: أعد التعريف إلى "header header" "sidebar main" "footer footer" مع grid-template-columns: 240px 1fr. اضبط aside { display: none } أو انقله أسفل المحتوى الرئيسي في تعريف المنطقة.
الفجوة والحشو
أضف فجوة بين مسارات Grid باستخدام: gap: var(--spacing-4). طبّق الحشو داخل كل منطقة بدلًا من تطبيقه على حاوية Grid للحفاظ على اتساق المسافات. يحصل الرأس والتذييل عادةً على حشوهما الأفقي الخاص المتوافق مع محاذاة الحد الأقصى لعرض Grid.
شبكات متداخلة
يمكن أن تكون منطقة المحتوى الرئيسي نفسها شبكة، مثل مقال ذي عمودين مع شريط جانبي داخل المنطقة الرئيسية. تنشئ الشبكات المتداخلة تخطيطًا للمحتوى داخل تخطيط غلاف الصفحة، من دون الحاجة إلى تسلسلات هرمية معقدة من class أو مواضع متداخلة بعمق.
الرأس الثابت
اجعل الرأس ثابتًا باستخدام: header { position: sticky; top: 0; z-index: 10; }. في تخطيط Grid، يعمل التموضع الثابت لعنصر فرعي في Grid كما هو متوقع؛ إذ يبقى الرأس ثابتًا بينما يمرر المحتوى الرئيسي والشريط الجانبي وaside تحته.
الأشرطة الجانبية الثابتة في تخطيط الكأس المقدسة
يمكن تثبيت كلا الشريطين الجانبيين باستخدام: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. ويبقيان ظاهرين أثناء تمرير المحتوى الرئيسي، ما ينشئ تخطيطًا من ثلاث لوحات لا يتمرر فيه إلا الجزء الأوسط.
Grid أم Flexbox لتخطيط الصفحة
استخدم Grid لتخطيطات غلاف الصفحة ثنائية الأبعاد، مثل تخطيط الكأس المقدسة؛ إذ يتفوق Grid في وضع العناصر داخل صفوف وأعمدة مسماة في الوقت نفسه. واستخدم Flexbox لتخطيطات المكونات أحادية الأبعاد، مثل عناصر التنقل في صف أو محتوى البطاقة في عمود، داخل مناطق Grid.
اختبار المعرفة
ما الذي يجعل grid-template-areas مفيدًا بشكل خاص لتخطيطات الكأس المقدسة المتجاوبة؟
الملخص
يجعل CSS Grid تخطيط الكأس المقدسة، الذي كان صعبًا تاريخيًا، سهلًا جدًا: تسمّي grid-template-areas المناطق، ويملأ 1fr في الصف الأوسط ارتفاع إطار العرض، وتعيد الاستعلامات الوسطية تعريف خريطة المناطق للطي المتجاوب. ويمكن إضافة الرؤوس والأشرطة الجانبية الثابتة فوق ذلك من دون تعقيد إضافي.
الأسئلة الشائعة
هل درس «تخطيط الكأس المقدسة باستخدام Grid» مجاني؟
نعم — نص درس «تخطيط الكأس المقدسة باستخدام Grid» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تخطيط الكأس المقدسة باستخدام Grid»؟
نفّذ تخطيط الكأس المقدسة الكلاسيكي، مع ترويسة وتذييل ومحتوى رئيسي وشريطيْن جانبييْن باستخدام CSS Grid. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «تخطيط الكأس المقدسة باستخدام Grid»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تخطيط تذييل جانبي ثابت
- تخطيط الكأس المقدسة باستخدام Grid
- تخطيط Masonry: نهجا CSS وJS
- التصميم الجوهري: تحديد الحجم حسب المحتوى