انتقل إلى محتوى الدرس

CSS Grid System النظام الشبكي Grid في لغة CSS

سوف تتعلم في هذا الدرس نظام التخطيط  الشبكي وهو grid system، وهو نظام سهل وبسيط ومبني فقط علي الصفوف والأعمدة ، مما يسهل تصميم صفحات الويب دون الحاجة إلى استخدام floats , positioning في لغة CSS.

1 صفوف تعليمية
لغة CSS
5,634 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
CSS grid system هو نظام تخطيط  لصفحات الويب وهي أكثر الأنظمة الحديثة إستخداماً لأنه نظام بسيط ونظام مرن وهو مبني علي نظام الصفوف والأعمدة كل حاوية تتكون من صفوف وكل صف يتكون من مجموعة أعمدة
وكل عمود هو حاوية وكل حاوية تتكون من صفوف وكل صف عبارة عن أعمدة وهكذا الأمر أصبح سهلاً جداً.

معلومات حول نظام جريد في لغة CSS:

  • تقسم صفحة الويب إلي حاويات grid system.
  • تقسم حاويات grid system إلي صف أو مجموعة صفوف.
  • تقسم الصفوف إلي عمود أو مجموعة أعمدة.
  • يمكن أن تربط الحاويات أو الصفوف أو الأعمدة علاقات بنظام grid system.
  • العلاقات بين grid items تكون علاقة size حجم أو علاقة position وضع العناصر أو علاقة بين layers الطبقات.
  • يمكن التحكم بسهولة في grid itmes بشكل جماعي مثلاً عرض العنصر يطبق علي الجميع وهكذا.
  • نظام grid هو يشبه HTML Tables من حيث التقسيم وتتكون الجداول من صفوف وأعمدة أو خلايا.
  • لتحويل أي عنصر في صفحة HTML بنظام grid system يجب أن يكون له خاصية display:grid والقيمة هي grid.


النظام الشبكي Grid في لغة CSS

Grid System

نظام grid في لغة CSS.