ما هو CSS Grid؟
CSS Grid Layout هو نظام تخطيط ثنائي الأبعاد مدمج في المتصفحات الحديثة. تُعرّف حاوية الشبكة باستخدام display: grid، ثم تتحكم في الأعمدة بـgrid-template-columns والصفوف بـgrid-template-rows. الوحدات الكسرية (fr) توزّع المساحة المتاحة بشكل متناسب. يمكن للعناصر الفرعية أن تمتد عبر أعمدة أو صفوف متعددة باستخدام grid-column: span N وgrid-row: span N.
كيفية استخدام مولّد شبكة CSS
-
حدد عدد الأعمدة والصفوف باستخدام حقول الأرقام (1–12 لكل منهما).
-
اضبط grid-template-columns وgrid-template-rows للتحكم في الأحجام (مثال: 1fr 2fr، 200px auto).
-
حدد الفجوة بين الخلايا (مثال: 10px، 1rem).
-
انقر على أي خلية في المعاينة لتحديدها (تتحول إلى اللون البرتقالي).
-
اضبط col-span وrow-span في لوحة امتداد الخلية، ثم انقر تطبيق. الخلايا الممتدة تتحول إلى اللون الأخضر.
-
انقر على تبويب CSS أو HTML لتبديل تنسيق المخرجات، ثم انقر نسخ إلى الحافظة.
-
انقر إعادة تعيين الكل للبدء من جديد بشبكة 3×3 جديدة.