مقدمة شاملة لتخطيطات CSS Grid: بناء واجهات ويب عصرية بأمثلة عملية

لقد أحدثت تقنية CSS Grid ثورة حقيقية في عالم تصميم الويب الحديث وتطوير الواجهات الأمامية. بقدر ما هي قوية ومرنة، بقدر ما أصبحت أداة لا غنى عنها للمطورين. على الرغم من وفرة الشروحات والمقالات المتاحة عبر الإنترنت، إلا أن الكثير منها يركز على الأساسيات النظرية دون التعمق في الأمثلة العملية التي تبرز قدراتها الحقيقية. يهدف هذا الدليل إلى سد هذه الفجوة، حيث سنتعلم مبادئ CSS Grid خطوة بخطوة مع التركيز على تطبيقها في أمثلة واقعية وعملية.

ما هو CSS Grid؟

CSS Grid هي وحدة تخطيط ثنائية الأبعاد ضمن لغة CSS تتيح لنا بناء تصميمات شبكية معقدة مباشرةً داخل المتصفح. قبل ظهور CSS Grid، كان المطورون يعتمدون إما على أنظمة شبكية مخصصة (custom grid systems) أو أطر عمل مثل Bootstrap لإنشاء التخطيطات. بينما كانت هذه الحلول تؤدي الغرض، فإن CSS Grid بسّطت بشكل كبير العديد من التحديات التي كانت تواجهنا، مثل محاذاة العناصر وتوزيع المساحات بمرونة. بفضل CSS Grid، أصبح تطوير التخطيطات البسيطة والمعقدة أمراً يسيراً للغاية. في هذا المقال، سنتعرف على بعض المصطلحات الأساسية ثم ننتقل لتطبيقها في مثال عملي لتخطيط صفحة ويب.

المصطلحات الأساسية في CSS Grid

لفهم CSS Grid بشكل فعال، من الضروري الإلمام بالمصطلحات الأساسية التالية:

• Columns (الأعمدة): هي المساحات العمودية التي تُقسّم إليها الشبكة.
• Rows (الصفوف): هي المساحات الأفقية التي تُقسّم إليها الشبكة.
• Cells (الخلايا): هي أصغر وحدة في الشبكة، تتكون عند تقاطع عمود وصف، وتشبه خلايا الجدول.
• Grid Lines (خطوط الشبكة): هي الخطوط الأفقية والعمودية التي تفصل بين الأعمدة والصفوف. يتم ترقيم هذه الخطوط بدءًا من 1.
• Gutter (المسافة بين العناصر): هي الفراغات أو الهوامش بين الأعمدة والصفوف، وتُعرف أيضاً باسم grid-gap.

يوضح الرسم التوضيحي أعلاه هذه المصطلحات بشكل مرئي. يمثل هذا المثال شبكة بحجم 3×2، أي تتكون من 3 أعمدة و 2 صفوف.

بناء تخطيط عملي باستخدام CSS Grid

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

كما يتضح من الصورة، يتضمن التخطيط جزءاً علوياً (header) وجزءاً سفلياً (footer). أما الصف الأوسط، فيحتوي على ثلاثة أعمدة: عمود للملاحة (nav) في اليسار، ومنطقة المحتوى الرئيسية (contents) في المنتصف (والتي تشغل معظم مساحة الصف)، وشريط جانبي (aside) في اليمين. إليك البنية الأساسية لـ HTML لهذا المثال:

 <div class="wrapper">
 <header class="items">HEADER</header>
 <nav class="items">NAV</nav>
 <div class="items contents">CONTENTS</div>
 <aside class="items">ASIDE</aside>
 <footer class="items">FOOTER</footer>
 </div>

التنسيقات الأولية (خارج نطاق CSS Grid)

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

 .wrapper * {
 background : orange;
 display : flex;
 justify-content : center;
 align-items : center;
 margin-bottom : 1px;
 margin-right : 1px;
 }

في هذا الجزء، قمنا بتطبيق تنسيقات عامة على جميع العناصر داخل الحاوية ذات الفئة .wrapper. قمنا بتعيين لون خلفية برتقالي (background: orange;) وإضافة هامش سفلي (margin-bottom: 1px;) وهامش أيمن (margin-right: 1px;) بسيط لخلق فاصل مرئي بين العناصر. كما استخدمنا خصائص Flexbox (display: flex;) مع justify-content: center; و align-items: center; لمحاذاة محتوى كل عنصر في المنتصف تماماً. الآن، لننتقل إلى الجزء الأهم: تطبيق CSS Grid.

تطبيق خصائص CSS Grid الأساسية

الآن، سنقوم بتطبيق خصائص CSS Grid على الحاوية الرئيسية .wrapper لتحويلها إلى شبكة:

 .wrapper {
 display : grid;
 grid-template-columns : 1fr 5fr 2fr;
 grid-template-rows : 5fr 20fr 5fr;
 grid-gap : 10px;
 height : 720px;
 }

• display: grid;: هذه هي الخاصية الأساسية التي تحول أي عنصر إلى حاوية Grid، مما يمكننا من استخدام جميع خصائص Grid الأخرى بداخلها.
• grid-template-columns: 1fr 5fr 2fr;: تحدد هذه الخاصية عدد الأعمدة وعرض كل منها. هنا، أنشأنا 3 أعمدة. الوحدة fr (اختصار لـ fraction) هي وحدة مرنة تمثل جزءاً من المساحة المتاحة في الشبكة. العمود الأول يأخذ جزءاً واحداً، والثاني خمسة أجزاء، والثالث جزأين، مما يعني أن العمود الأوسط سيكون الأعرض.
• grid-template-rows: 5fr 20fr 5fr;: تحدد هذه الخاصية عدد الصفوف وارتفاع كل منها. لدينا هنا 3 صفوف. الصف الأول (لـ header) والثالث (لـ footer) يأخذان 5 أجزاء كل منهما، بينما الصف الأوسط (لـ nav و contents و aside) يأخذ 20 جزءاً، مما يجعله الأطول.
• grid-gap: 10px;: هذه الخاصية تحدد المسافة البينية (gutter) بين الأعمدة والصفوف بمقدار 10 بكسل، مما يضيف فصلاً بصرياً جميلاً بين عناصر الشبكة.
• height: 720px;: قمنا بتعيين ارتفاع ثابت للحاوية .wrapper لضمان ظهور التخطيط بشكل واضح في هذا المثال.

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

تحديد مواضع عناصر الشبكة (Header و Footer)

لجعل التخطيط مطابقاً للمثال المستهدف، نحتاج إلى جعل عنصري header و footer يمتدان عبر جميع الأعمدة في صفيهما الخاصين. يمكن تحقيق ذلك باستخدام خصائص grid-column-start و grid-column-end:

 header {
 grid-column-start : 1;
 grid-column-end : 4;
 }
 footer {
 grid-column-start : 1;
 grid-column-end : 4;
 }

هنا، قمنا بتوجيه كل من header و footer ليبدأ من خط الشبكة الأول (grid line 1) وينتهي عند خط الشبكة الرابع (grid line 4). بما أن لدينا 3 أعمدة، فإن هذا يعني أن العنصر سيمتد عبر جميع الأعمدة الثلاثة (من الخط 1 إلى الخط 2 للعمود الأول، من الخط 2 إلى الخط 3 للعمود الثاني، ومن الخط 3 إلى الخط 4 للعمود الثالث). هذه الطريقة تضمن أن يشغل كل من الرأس والتذييل كامل عرض الصف الذي يقعان فيه. بعد تطبيق هذه التعديلات، سيبدو التخطيط تماماً كما نرغب:

الكود الكامل للمثال

للتوضيح الشامل، إليك الكود الكامل لصفحة HTML و CSS التي استخدمناها في هذا المثال:

 <!DOCTYPE html>
 <html>
 <head>
 <title>CSS Grid Layout Example</title>
 <style type="text/css">
 .wrapper {
 display : grid;
 grid-template-columns : 1fr 5fr 2fr;
 grid-template-rows : 5fr 20fr 5fr;
 grid-gap : 10px;
 height : 720px;
 }
 header {
 grid-column-start : 1;
 grid-column-end : 4;
 }
 footer {
 grid-column-start : 1;
 grid-column-end : 4;
 }
 .wrapper * {
 background : orange;
 display : flex;
 justify-content : center;
 align-items : center;
 margin-bottom : 1px;
 margin-right : 1px;
 }
 </style>
 </head>
 <body>
 <div class="wrapper">
 <header class="items">HEADER</header>
 <nav class="items">NAV</nav>
 <div class="items contents">CONTENTS</div>
 <aside class="items">ASIDE</aside>
 <footer class="items">FOOTER</footer>
 </div>
 </body>
 </html>

بهذا نكون قد أكملنا شرحنا لمقدمة CSS Grid Layout مع أمثلة عملية توضح كيفية بناء تخطيطات مرنة وقوية. نأمل أن يكون هذا الدليل قد أضاف قيمة لفهمك لهذه التقنية الرائعة.

الخلاصة التقنية

تُعد CSS Grid Layout نقلة نوعية في مجال تصميم الويب، حيث توفر حلاً أصيلاً وفعالاً لبناء تخطيطات معقدة ومتجاوبة لم تكن ممكنة بنفس السهولة والمرونة باستخدام التقنيات السابقة مثل Floats أو حتى Flexbox وحدها. إن قدرتها على التعامل مع الأبعاد الثنائية (الصفوف والأعمدة) في آن واحد، بالإضافة إلى وحدات القياس المرنة مثل fr، تمنح المطورين تحكماً غير مسبوق في توزيع المحتوى وتنظيمه. استخدام CSS Grid لا يقتصر فقط على تبسيط عملية التخطيط، بل يعزز أيضاً من سهولة صيانة الكود وقابليته للتوسع، مما يجعلها أداة لا غنى عنها في ترسانة أي مطور ويب حديث يسعى لإنشاء تجارب مستخدم متميزة.