يستخدم Grid System لتصميم قوالب متجاوبة مع شاشات الموبايل والتابلت و الأجهزة المكتبية ، وهو نظام يعتمد على تقسيم الشاشة ، تم ابتكاره لأول مرة على يد مطوري مكتبة البوتستراب ، هذه المكتبة التي اعتمد عليها المصممون طويلا ولا يزالون ، غير أنه بعد ذلك قام مطوروا لغة Css بابتكار Grid LAOUT MODULE جديد وأكثر احترافية بخصائص وقواعد جديدة وقوية يمكنك من خلالها تقسيم الشاشة مع التحكم في كل العناصر وتصميم قوالب متجاوبة بدون استخدام Float و Positioning، كما رأينا في Css Flexbox ، وبشكل أفضل بكثير.
Css Grid مدعوم في كل المتصفحات الحديثة ككل Modules التي تمت إضافتها حديثا في Css3 ، ويبدأ دعمها من الإصدارات التالية :
.PNG "دورة CSS GRID | تخطيط القوالب باستخدام نظام الأعمدة")
يتكون Grid Laout من عنصر أب Parent يسمى Container يحتوي بدوره على مجموعة من العناصر الأبناء Childs يتم ترتيبها داخل الأب بما يقتضيه التصميم ، حيث يتم تقسيم الأب Container إلى أعمدة وصفوف:
- الأعمدة Columns للتقسيم أفقيا
- الصفوف Rows للتقسيم عموديا
وتتم هذه العملية بما يقتضيه التصميم المطلوب ، باستخدام ثقنية Grid Laout Module التي تحتوي على مجموعة من الخصائص بعضها تخص العنصر الأب وأخرى تخص الأبناء.
كل هذه الخصائص سنشير إليها كتابة وسنشرحها عمليا عن طريق الفيديوهات.
خصائص Grid تستخدم للأب container
لتشغيل Grid System في Css نقوم أولا بإنشاء Grid Container وبداخله Grid Items وهذا بيناه في الأعلى ، العنصر الأب أي Grid Container يقبل مجموعة من الخصائص الموجودة في Css:
1- نضع له display: grid أو display: inline-grid هذه الأخيرة في حال أردنا ظهور عناصر أخرى بجانبه ، وهكذا نكون قد شغلنا Grid System في انتظار التحكم في العناصر بداخل Grid Container .
2- الخاصية grid-content-column وبهذه الخاصية نقوم بالتقسيم أفقيا ونحدد عدد الأعمدة وكم يحتل كل عنصر داخل العمود من المساحة أفقيا.
3- الخاصية grid-content-row تقوم بترتيب الصفوف عموديا عكس الخاصية أعلاه ، ونحدد بها عدد الصفوف وكم يحتل كل صف عموديا.
4- الخاصية column-gap تحدد مساحة فاصلة بين الأعمدة أفقيا.
5- الخاصية row-gap تحدد مساحة فاصلة بين الصفوف عموديا.
6- الخاصية gap المختصرة تجمع القيمتين أو توضع لها قيمة واحدة تطبق أفقيا وعموديا.
7- الخاصية justify-content التي رأيناها في Flexbox وتحدد تموضع العناصر أفقيا.
8- الخاصية align-content التي رأيناها في Flexbox وتحدد تموضع العناصر عموديا.
9- الخاصية grid-template-areas وتستخدم لتقسيم Grid-container إلى أعمدة وتحديد المجالات وتسميتها ، لنقوم باستخدام هذه الأسماء فيما بعد كقيمة للخاصية grid-area التي توضع للعناصر Grid items .
خصائص Grid تستخدم للأبناء Grid Items
1- الخاصية grid-column-start لتحديد العمود الذي يبدأ منه العنصر .
2- الخاصية grid-column-end لتحديد العمود الذي يتوقف عنده العنصر ولا يأخذه.
3- الخاصية grid-column وهي اختصار للخاصيتين المذكورتين أعلاه وتأخذ القيمتين ، قيمة البداية و قيمة النهاية ، وهذه الخصائص تجعل العنصر يتمدد ويأخذ مكانين أو أكثر داخل Grid بشكل أفقي.
4- الخاصية grid-row-start لتحديد الصف الذي يبدأ منه العنصر عموديا.
5- الخاصية grid-row-end لتحديد الصف الذي يتوقف عنده العنصر ولا يأخذه عموديا.
6- الخاصية grid-row وهي اختصار للخاصيتين المذكورتين أعلاه وتأخذ القيمتين ، وهذه الخصائص تجعل العنصر يتمدد ويأخذ مكانين أو أكثر داخل Grid بشكل عمودي.
7- الخاصية grid-area وتأخذ أربع قيم بالترتيب :
grid-row-start
grid-column-start
grid-row-end
grid-column-end
وتقبل أيضا كقيمة إسم المجال الذي تم إنشاؤه من قبل في Grid container بالخاصية grid-template-areas .