دليل CSS Grid Container الشامل - التحكم في تخطيط الصفحات

🎨 مقدمة إلى CSS Grid Container: أساس بناء التخطيطات المتقدمة

مرحباً بك في عالم CSS Grid! 🚀 إذا كنت تبحث عن طريقة قوية وسهلة لترتيب عناصر صفحتك في تخطيطات ثنائية الأبعاد (صفوف وأعمدة)، فقد وصلت إلى المكان الصحيح. Grid Container هو العنصر الأساسي الذي يبدأ منه بناء أي شبكة. تخيله كإطار أو حاوية رئيسية تحدد بداخلها مناطق (خلايا) منتظمة لتضع فيها محتواك بشكل منظم ودقيق.

في هذا الدرس، سنتعلم كيفية تحويل أي عنصر HTML إلى حاوية شبكة (Grid Container) والتحكم الكامل في شكل هذه الشبكة من حيث عدد الأعمدة والصفوف وأحجامها.

🔧 الخطوة الأولى: كيف ننشئ Grid Container؟

لتحويل أي عنصر إلى حاوية شبكة، كل ما تحتاجه هو خاصية CSS واحدة بسيطة: display.

.container {
  display: grid;
}

هذا كل شيء! ✨ بمجرد تطبيق display: grid; على العنصر (مثل <div>)، يصبح هذا العنصر حاوية الشبكة (Grid Container). جميع العناصر الفرعية المباشرة داخل هذا العنصر تتحول تلقائياً إلى عناصر الشبكة (Grid Items)، وستبدأ في اتباع قواعد تخطيط الـ Grid.

مثال واقعي: لنفترض أن لديك قسماً في صفحتك تريد ترتيب عدة مقالات أو بطاقات منتجات داخله.

<div class="articles-container">
  <article>مقالة 1</article>
  <article>مقالة 2</article>
  <article>مقالة 3</article>
  <article>مقالة 4</article>
</div>

.articles-container {
  display: grid; /* تحويل القسم إلى حاوية شبكة */
  background-color: #f0f0f0;
  padding: 20px;
}

📐 الخطوة الثانية: تعريف أعمدة وصفوف الشبكة (grid-template-columns و grid-template-rows)

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

1. تعريف الأعمدة (grid-template-columns)

تتحكم هذه الخاصية في عدد وعرض أعمدة الشبكة. تقوم بتعريف قائمة مفصولة بمسافات، حيث كل قيمة تمثل عرض عمود.

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

في المثال أعلاه، قمنا بإنشاء شبكة مكونة من 3 أعمدة، عرض كل منها 200 بكسل.

2. تعريف الصفوف (grid-template-rows)

بنفس الطريقة، تتحكم هذه الخاصية في عدد وارتفاع صفوف الشبكة.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 150px 150px;
}

الآن أصبحت شبكتنا تحتوي على 3 أعمدة (بعرض 200px لكل منها) وصفين (بارتفاع 150px لكل منهما)، أي ما مجموعه 6 خلايا (3 × 2).

🌟 الوحدة الجديدة fr (الكسر)

إحدى أقوى المميزات في Grid هي وحدة fr (تختصر fraction أي كسر). تمثل هذه الوحدة جزءاً من المساحة المتاحة في الحاوية. هذا يجعل إنشاء تخطيطات مرنة يتكيف مع حجم الشاشة أمراً في غاية السهولة.

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

في هذا المثال:

• العمود الأول يأخذ 1 جزء من العرض المتاح.
• العمود الثاني (العمود الأوسط) يأخذ 2 جزء، أي ضعف عرض العمود الأول والأخير.
• العمود الثالث يأخذ 1 جزء. لذا، إذا كان عرض الحاوية 400 بكسل، سيكون توزيع الأعمدة: 100px | 200px | 100px.

مثال عملي: تخطيط صفحة كلاسيكي (رأس، شريط جانبي، محتوى رئيسي، تذييل).

.page-layout {
  display: grid;
  grid-template-rows: auto 1fr auto; /* رأس وتذييل بحجم محتواهما، والمحتوى الرئيسي يأخذ الباقي */
  grid-template-columns: 250px 1fr; /* شريط جانبي ثابت، ومحتوى رئيسي مرن */
  min-height: 100vh; /* ارتفاع الحاوية يساوي ارتفاع النافذة */
}

🛠️ الخطوة الثالثة: الفجوات بين العناصر (gap)

لإضافة مسافة (هوامش) بين خلايا الشبكة، نستخدم خاصية gap. كانت في السابق grid-gap ولكن gap أصبحت المعيار الآن وتدعمها جميع المتصفحات الحديثة.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; /* إضافة مسافة 20 بكسل بين جميع الأعمدة والصفوف */
}

يمكنك التحكم في الفجوات الأفقية والرأسية بشكل منفصل:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 15px;    /* مسافة بين الصفوف فقط */
  column-gap: 30px; /* مسافة بين الأعمدة فقط */
}
/* أو باستخدام gap: row-gap column-gap; */
/* gap: 15px 30px; */

🧪 مثال شامل: بناء معرض صور بسيط

لنجمع كل ما تعلمناه في مثال عملي لبناء معرض صور (Grid) بثلاثة أعمدة.

<div class="gallery">
  <img src="image1.jpg" alt="وصف الصورة 1">
  <img src="image2.jpg" alt="وصف الصورة 2">
  <img src="image3.jpg" alt="وصف الصورة 3">
  <img src="image4.jpg" alt="وصف الصورة 4">
  <img src="image5.jpg" alt="وصف الصورة 5">
  <img src="image6.jpg" alt="وصف الصورة 6">
</div>

.gallery {
  display: grid; /* 1. إنشاء الحاوية */
  grid-template-columns: repeat(3, 1fr); /* 2. ثلاثة أعمدة متساوية العرض */
  gap: 16px; /* 3. إضافة فجوات بين الصور */
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.gallery img {
  width: 100%; /* جعل الصورة تملأ الخلية */
  height: 200px;
  object-fit: cover; /* لضبط حجم الصورة داخل الإطار */
  border-radius: 8px;
}

شرح الكود:

1. .gallery أصبح grid container.
2. grid-template-columns: repeat(3, 1fr); هي دالة مختصرة لإنشاء 3 أعمدة بعرض 1fr لكل منها. (مكافئة لكتابة 1fr 1fr 1fr).
3. gap: 16px; تضيف هوامش جميلة بين الصور.

🎯 ملخص الدرس

لقد تعلمت اليوم الأساس المتين لـ CSS Grid Container:

• display: grid; ➜ تحويل العنصر إلى حاوية شبكة.
• grid-template-columns ➜ تحديد عدد وعرض أعمدة الشبكة.
• grid-template-rows ➜ تحديد عدد وارتفاع صفوف الشبكة.
• وحدة fr ➜ لإنشاء تخطيطات مرنة ونسبية.
• gap ➜ لإضافة مسافات بين العناصر داخل الشبكة.

تذكر أن Grid Container هو فقط من يحدد هيكل الشبكة (القالب). العناصر الفرعية (Grid Items) ستتوضع تلقائياً داخل هذا القالب من اليسار لليمين ومن الأعلى للأسفل.