مولد CSS Grid
ما هو CSS Grid؟
CSS Grid Layout هو أقوى نظام تخطيط متاح في CSS. إنه نظام ثنائي الأبعاد يمكنه التعامل مع الأعمدة والصفوف، على عكس flexbox الذي هو في الأساس أحادي البعد.
كيفية استخدام مولد CSS Grid
تعيين أبعاد الشبكة
استخدم عناصر التحكم الجانبية لتحديد الأعمدة والصفوف والفجوات.
تحديد مناطق الشبكة
انقر واسحب على المعاينة لتحديد مناطق مستطيلة.
تخصيص الوحدات
اضبط أحجام الأعمدة والصفوف باستخدام حقول الإدخال.
جرب قالبًا
اختر من تخطيطات جاهزة مثل Holy Grail أو Blog أو Dashboard.
إنشاء الكود
انقر على "إنشاء الكود" لتصدير CSS و HTML جاهزين للاستخدام.
دليل بناء جملة CSS Grid
يتضمن جوهر CSS Grid خصائص مثل grid-template-columns (لتحديد عرض الأعمدة)، و grid-template-rows (لتحديد ارتفاع الصفوف)، و grid-gap (لضبط التباعد). يسمح استخدام الوحدات الجزئية (fr) بتخطيطات مرنة تتكيف مع حجم شاشة العرض.
أمثلة على تخطيط CSS Grid
تشمل الأمثلة الشائعة تخطيط 'Holy Grail' (رأس الصفحة، الشريط الجانبي، المحتوى الرئيسي، التذييل). مع grid-template-areas، يمكنك تحديد هذه المناطق باستخدام أسماء بديهية، مما يجعل الكود الخاص بك أنظف بكثير وأسهل في الصيانة.