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

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

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

الشبكة ضد Flexbox

إنه سؤال شائع يطرح بشكل عام كيف تختلف الشبكة عن الصندوق المرن. الشبكة مخصصة للتخطيطات ثنائية الأبعاد (صفوف وأعمدة في نفس الوقت)، بينما يتم استخدام flexbox للتخطيطات أحادية البعد (إما في صف أو عمود). يتم استخدام Flexbox عندما يلزم أن يكون أي شيء في خط مستقيم.

يستخدم Flexbox لترتيب العناصر في عمود واحد أو في صف واحد. من ناحية أخرى، الشبكة هي الأفضل لترتيب العناصر في الأعمدة والصفوف المتعددة.

دعونا نفهم الشبكة في CSS باستخدام مثال.

مثال

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

انتاج |