CSS Grid هو نظام تخطيط (Layout) متقدم في لغة CSS يُستخدم لتنظيم العناصر داخل الصفحة في شكل شبكة ثنائية الأبعاد (صفوف وأعمدة)، مما يمنحك تحكمًا دقيقًا ومرنًا في تصميم الواجهات.
ما هو CSS Grid؟
يُعد CSS Grid من أقوى أدوات تصميم الويب الحديثة، حيث يسمح لك بإنشاء تخطيطات معقدة بسهولة مقارنة بالطرق التقليدية مثل float أو حتى Flexbox. الفرق الأساسي هو أن Grid يعمل على بعدين (أفقي وعمودي)، بينما يعمل Flexbox غالبًا على بعد واحد فقط.
كيف يعمل CSS Grid؟
لاستخدام Grid، تحتاج إلى عنصر حاوي (Container) وتحديده كشبكة باستخدام الخاصية:
display: grid;
بعد ذلك يمكنك تعريف الصفوف والأعمدة باستخدام:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
هذا يعني تقسيم الصفحة إلى 3 أعمدة وصفين.
أهم مميزات CSS Grid
1. التحكم الكامل في التخطيط
يمكنك تحديد حجم كل عمود وصف بدقة، سواء بوحدات ثابتة (px) أو نسبية (fr).
2. سهولة إنشاء تصميمات معقدة
يمكنك تصميم صفحات كاملة (Header – Content – Sidebar – Footer) بسهولة داخل شبكة واحدة.
3. محاذاة العناصر بسهولة
يوفر خصائص مثل:
- justify-items
- align-items
لتنظيم العناصر داخل الشبكة بشكل احترافي.
4. دعم التصميم المتجاوب (Responsive)
يمكنك تغيير تخطيط الشبكة حسب حجم الشاشة باستخدام media queries.
الفرق بين CSS Grid و Flexbox
- CSS Grid: مناسب للتصميمات الكبيرة والمعقدة (صفوف وأعمدة)
- Flexbox: مناسب للعناصر الصغيرة أو الترتيب في اتجاه واحد
في كثير من الأحيان يتم استخدام الاثنين معًا.
متى تستخدم CSS Grid؟
- عند تصميم صفحة ويب كاملة
- عند الحاجة لتقسيم الصفحة إلى أقسام واضحة
- عند إنشاء Layout معقد ومتعدد الأعمدة
نصائح لاحتراف CSS Grid
- ابدأ بتصميم بسيط ثم طوّر الشبكة تدريجيًا
- استخدم وحدة fr لتوزيع المساحات بشكل مرن
- جرّب خاصية grid-gap (أو gap) لإضافة مسافات بين العناصر
- استخدم أدوات المتصفح (DevTools) لرؤية الشبكة بصريًا
أخطاء شائعة
- تعقيد التصميم دون حاجة
- عدم استخدام أسماء واضحة للمناطق (grid areas)
- الخلط بين Grid و Flexbox بدون فهم الفرق
خلاصة
CSS Grid هو أداة قوية وحديثة لتصميم صفحات الويب بطريقة منظمة ومرنة. إذا تعلمت استخدامه بشكل صحيح، ستتمكن من إنشاء واجهات احترافية بسهولة وسرعة، مع تحكم كامل في توزيع العناصر داخل الصفحة.