Grid في CSS: تخطيط الصفحة بالصفوف والأعمدة

الدرس 8 من 19 · CSS

تعلمت في الدرس السابق أن Flexbox ممتاز لترتيب العناصر في اتجاه واحد: صف أو عمود. لكن ماذا لو أردت التحكم في الصفوف والأعمدة معاً، مثل معرض صور أو تخطيط صفحة كاملة فيها رأس وقائمة جانبية ومحتوى وتذييل؟ هنا يأتي CSS Grid، أقوى أداة تخطيط في CSS.

الفكرة: شبكة مثل لوحة الشطرنج

تخيّل لوحة شطرنج أو جدول الحصص: خطوط أفقية ورأسية تقسم المساحة إلى خانات. مع Grid ترسم هذه الخطوط بنفسك، ثم تضع كل عنصر في خانة أو أكثر.

وكما في Flexbox، هناك حاوية تكتب لها display: grid، وعناصر هي أبناؤها المباشرون:

.gallery {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

الآن تترتب العناصر في ثلاثة أعمدة عرض كل منها 200px. وعندما تمتلئ الأعمدة الثلاثة، ينتقل العنصر الرابع تلقائياً إلى صف جديد.

وحدة fr: الحصة من المساحة

الأعمدة بعرض ثابت لا تتكيف مع حجم الشاشة. لذلك جاء Grid بوحدة خاصة اسمها fr (اختصار fraction أي «جزء»):

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

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

تخيّلها مثل تقسيم بيتزا: 1fr 2fr تعني أن صديقك يأخذ ثلث البيتزا وأنت تأخذ الثلثين، سواء كانت البيتزا صغيرة أو كبيرة.

ويمكنك خلط الوحدات:

.page {
  grid-template-columns: 250px 1fr; /* قائمة جانبية ثابتة، والمحتوى يأخذ الباقي */
}

الدالة repeat

بدلاً من كتابة 1fr 1fr 1fr 1fr، استخدم repeat:

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 أعمدة متساوية */
  gap: 16px;
}

والخاصية gap تعمل هنا تماماً كما في Flexbox: مسافة بين الصفوف والأعمدة. ويمكنك تحديد الصفوف أيضاً بـ grid-template-rows إذا احتجت ارتفاعات محددة.

شبكة متجاوبة بسطر واحد

هذا من أشهر أسطر CSS الحديثة وأكثرها فائدة:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

اقرأه هكذا: «ضع أكبر عدد ممكن من الأعمدة (auto-fit)، بشرط ألا يقل عرض العمود عن 200px، ووزّع الباقي بالتساوي». النتيجة: أربعة أعمدة على شاشة الكمبيوتر، وعمودان على التابلت، وعمود واحد على الموبايل، دون أي قاعدة إضافية.

تمديد العنصر على عدة خانات

يمكن أن يمتد عنصر على أكثر من عمود أو صف، تماماً مثل colspan في جداول HTML:

.featured {
  grid-column: span 2; /* يأخذ عرض عمودين */
}

.tall {
  grid-row: span 2;    /* يأخذ ارتفاع صفين */
}

مفيد لإبراز خبر رئيسي أو صورة كبيرة في معرض صور.

تسمية المناطق: grid-template-areas

أجمل ميزة في Grid أنك تستطيع رسم تخطيط الصفحة بالكلمات:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  gap: 12px;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: content; }
footer { grid-area: footer; }

كل سطر نصي يمثل صفاً في الشبكة، وكل كلمة تمثل خانة. تكرار header مرتين يعني أن الرأس يمتد على العمودين. وفي صفحة عربية rtl، يكون العمود الأول، أي القائمة الجانبية هنا، على اليمين تلقائياً.

Grid أم Flexbox؟

استخدم Flexbox عندما	استخدم Grid عندما
تريد ترتيب عناصر في اتجاه واحد	تريد التحكم في الصفوف والأعمدة معاً
شريط تنقل، أزرار متجاورة، توسيط عنصر	تخطيط صفحة كاملة، معرض صور، شبكة بطاقات
حجم العناصر يحدده محتواها	الشبكة تحدد حجم العناصر

وفي الواقع، المواقع الحقيقية تستخدم الاثنين معاً: Grid لتخطيط الصفحة الكبير، و Flexbox لترتيب العناصر الصغيرة داخل كل جزء.

جرّب بنفسك

هذا تخطيط صفحة بالمناطق، وتحته شبكة بطاقات متجاوبة. غيّر 120px في minmax إلى 80px ولاحظ زيادة عدد الأعمدة، وجرّب تبديل أماكن sidebar و content في المناطق:

جرّب بنفسكCSS

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

كتابة grid-template-columns على العناصر بدل الحاوية: خصائص الشبكة تُكتب للأب، و grid-column و grid-area تُكتب للأبناء.
أخطاء في رسم المناطق: كل سطر في grid-template-areas يجب أن يحتوي نفس عدد الكلمات، والمنطقة يجب أن تكون مستطيلة، وإلا تجاهل المتصفح التخطيط كله.
أعمدة بعرض ثابت بالبكسل فقط: مثل 300px 300px 300px تخرج عن شاشة الموبايل. استخدم fr أو minmax.

اختبر نفسك

سؤال

في grid-template-columns: 1fr 3fr، ما نسبة عرض العمود الثاني إلى الأول؟

سؤال

أي أداة أنسب لتخطيط صفحة كاملة فيها رأس وقائمة جانبية ومحتوى وتذييل؟

الخلاصة

display: grid على الحاوية، و grid-template-columns لتحديد الأعمدة.
وحدة fr تقسم المساحة المتاحة بنسب، و repeat تختصر التكرار.
repeat(auto-fit, minmax(200px, 1fr)) شبكة متجاوبة بسطر واحد.
grid-column: span 2 لتمديد عنصر، و grid-template-areas لرسم التخطيط بالكلمات.
Grid للتخطيط في بعدين، و Flexbox للترتيب في بعد واحد، والأفضل استخدامهما معاً.

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.