الأدوات · CSS · معمل Grid
معمل Grid
أنشئ تخطيط CSS grid - عدد المسارات والفجوات والمحاذاة، وموضع كل عنصر - مع معاينة حيّة، وانسخ الكود.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
كيف تعمل
اختر شكلًا جاهزًا، أو ابدأ من الشبكة الافتراضية 3×3.
اضبط عدد الأعمدة والصفوف والفجوات والمحاذاة.
اختر عنصرًا لتضعه ببداية وامتداد مخصصين في العمود أو الصف، ثم انسخ الكود.
أسئلة شائعة
لا. تُبنى الشبكة وكود CSS الناتج بالكامل داخل متصفحك.
أي وضع مخصص يتجاوز عدد الأعمدة أو الصفوف الذي حددته يُنشئ مسارًا ضمنيًا إضافيًا تلقائيًا - هذا كود CSS صالح، وليس خطأ.
justify-items يحدد موضع المحتوى داخل كل خلية. أما justify-content فيحدد موضع مجموعة المسارات كلها داخل الحاوية - لا يظهر فرق إلا عندما لا تملأ المسارات الحاوية بالكامل.
نعم، وهذا صحيح تمامًا. محور أعمدة الشبكة يتبع اتجاه الصفحة، فيُرسم العمود الأول على الجهة المقابلة فعليًا تحت الاتجاه من اليمين إلى اليسار، بلا أي كود إضافي - هذه الأداة تعرض سلوك CSS Grid الحقيقي، لا تقريبًا يفرض الاتجاه من اليسار إلى اليمين.
التعليقات