67. تعريف الأعمدة والصفوف

جوهر CSS Grid هو تحديد حجم وعدد الأعمدة والصفوف باستخدام خاصيتي grid-template-columns و grid-template-rows.

تعريف الأعمدة

قم بسرد العرض المطلوب لكل عمود، مفصولاً بمسافة.

css .container { display: grid;

/* يعرف 3 أعمدة: الأول بعرض 100 بكسل (ثابت) الثاني بنسبة 40% من عرض الحاوية (مرن) الثالث بعرض 200 بكسل (ثابت) */ grid-template-columns: 100px 40% 200px; }

تقديم وحدة fr

وحدة الكسور (fr) هي الوحدة الأكثر شيوعاً في Grid. تقوم بتقسيم المساحة الحرة المتاحة إلى نسب.

css .container-fr { display: grid; /* يعرف 3 أعمدة: وحدة واحدة، وحدتان، وحدة واحدة / grid-template-columns: 1fr 2fr 1fr; / سيكون العمود الأوسط ضعف عرض العمودين الخارجيين */ }

تعريف الصفوف

يتم تعريف الصفوف بشكل مشابه، وعادة ما تستخدم وحدات ثابتة أو auto (لتحديد الحجم بناءً على المحتوى).

css .container-rows { grid-template-rows: 50px auto 100px; /* الصف الأول 50 بكسل (هيدر) الصف الثاني يضبط الارتفاع حسب المحتوى (المحتوى الرئيسي) الصف الثالث 100 بكسل (تذييل) */ }

تلقائي مقابل صريح: عندما تعرف القوالب، فإنك تنشئ شبكة صريحة (Explicit Grid). أي عناصر تقع خارج هذا الهيكل المحدد توضع في الشبكة الضمنية (Implicit Grid).