مولد CSS Grid
معاينة حية
لماذا تستخدم مولد CSS Grid مرئي؟
يُعد CSS Grid أقوى نظام تخطيط في CSS، لكن الصيغ البرمجية الخاصة به - مثل fr و minmax() و repeat() - تتطلب منحنى تعلم حاد. يتيح لك المولد المرئي الخاص بنا ضبط شبكتك عبر السلايدرات والقوائم المنسدلة ومشاهدة التحديث فوراً، مما يساعدك على فهم دور كل خاصية دون الحاجة للغوص في التوثيقات المعقدة.
معاينة حية للشبكة
شاهد تحديث شبكتك في الوقت الفعلي أثناء ضبط الأعمدة والصفوف والفجوات والمحاذاة.
دعم وحدة fr
تستخدم القوالب الوحدات الكسرية (fr) لإنشاء شبكات مرنة ومتجاوبة تتكيف مع حجم الحاوية.
مخرج CSS جاهز
يصدر كود .container {}. نظيفاً يحتوي على جميع خصائص القوالب والفجوات والمحاذاة.
كيف تبني تخطيط CSS Grid
اضبط الأعمدة والصفوف
استخدم السلايدرات لتحديد عدد الأعمدة والصفوف لشبكتك.
اختر القالب والفجوة
اختر قالب الأعمدة (متساوي، مرن، أو متجاوب) واضبط الفجوات بين الخلايا.
نسخ كود CSS
انقر على 'نسخ كود CSS' للحصول على الكود كاملاً لملف التنسيق الخاص بك.
حالات استخدام CSS Grid
تخطيطات الصفحات
ابنِ هياكل الصفحات (هيدر/سايدبار/محتوى/فوتر) بشكل نظيف ومنظم.
لوحات البيانات
أنشئ تخطيطات معقدة للوحات المعلومات مع بطاقات بأحجام مختلفة.
معارض الصور
ابنِ معارض صور متناسقة أو بتصميم Masonry مع ميزات التجاوب التلقائي.
تخطيطات المجلات
أنشئ تصاميم تحريرية بأعمدة غير متماثلة وعناصر تمتد عبر عدة خلايا.
أفضل ممارسات CSS Grid
✓ فضل وحدات fr على النسب المئوية
تقوم وحدة fr بتوزيع المساحة المتاحة تلقائياً، مما يغنيك عن الحساب اليدوي للنسب المئوية.
✓ استخدم minmax() للشبكات المتجاوبة
يسمح لك هذا بإنشاء شبكات تغير عدد أعمدتها تلقائياً حسب حجم الشاشة دون الحاجة للكثير من الـ media queries.
✓ استخدم مناطق الشبكة المسميات (Named Grid Areas)
تسمية الخلايا (header, sidebar...) تجعل الكود أسهل في القراءة والتعديل بشكل كبير.
✓ افهم الفرق بين auto-fill و auto-fit
كلاهما يساعد في التجاوب، لكن auto-fit يمدد العناصر لملء المساحة المتبقية وهو المفضل عادةً لشبكات البطاقات.
❓ الأسئلة الشائعة
ما هي وحدة fr في CSS Grid؟
هي 'وحدة كسرية' تمثل جزءاً من المساحة المتاحة. مثلاً 1fr يعني استهلاك من المساحة المتبقية بالتساوي.
كيف يختلف CSS Grid عن Flexbox؟
Flexbox أحادي البعد (صف أو عمود)، أما CSS Grid فهو ثنائي البعد يتحكم في الصفوف والأعمدة معاً في نفس الوقت.
ماذا تفعل دالة minmax()؟
تحدد نطاقاً لحجم المسار (مثلاً بين 200px و 1fr)، مما يجعل التصميم مرناً ومقيداً بحدود دنيا في نفس الوقت.
متى أستخدم Grid ومتى أستخدم Flexbox؟
استخدم Grid لهيكل الصفحة العام والمخططات المعقدة. استخدم Flexbox للمكونات البسيطة مثل القوائم والأزرار. معظم المواقع الحديثة تمزج بينهما.