مولّد CSS Grid
ينشئ مولد CSS Grid تخطيطات شبكية من عدد الأعمدة والصفوف والفجوات وقيم grid-template المخصصة الاختيارية ومحاذاة العناصر، مع معاينة مباشرة وكود CSS جاهز للنسخ.
px
px
حول هذه الأداة
ينشئ مولد CSS Grid تخطيطات شبكية من عدد الأعمدة والصفوف والفجوات وقيم grid-template المخصصة الاختيارية ومحاذاة العناصر، مع معاينة مباشرة وكود CSS جاهز للنسخ.
طريقة الاستخدام
- حدد عدد الأعمدة والصفوف.
- اضبط الفجوات بين الأعمدة والصفوف.
- أدخل قوالب مخصصة إن أردت مثل 200px 1fr 1fr.
- اختر justify-items وalign-items، ثم انقر Copy CSS.
معلومات مفيدة
- توزّع وحدة fr المساحة الحرة: فـ 1fr 2fr تمنح العمود الثاني ضعف عرض الأول.
- repeat(3, 1fr) اختصار لثلاثة أعمدة متساوية.
- تحدد column-gap وrow-gap الفواصل بين المسارات.
- Grid ثنائي البعد، يتحكم في الصفوف والأعمدة معًا.
- تنشئ repeat(auto-fit, minmax(200px, 1fr)) شبكة متجاوبة دون استعلامات وسائط.
تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.
الأسئلة الشائعة
كيف أنشئ شبكة من 3 أعمدة في CSS؟
استخدم display: grid; grid-template-columns: repeat(3, 1fr); على الحاوية، وأضف gap للتباعد.
ماذا تعني fr في CSS Grid؟
fr جزء من المساحة الحرة المتاحة في حاوية الشبكة.
CSS Grid أم Flexbox؟
Grid الأفضل للتخطيطات ثنائية البعد مثل هياكل الصفحات وشبكات البطاقات، وFlexbox للصفوف أو الأعمدة أحادية البعد.
كيف أنشئ شبكة متجاوبة دون استعلامات وسائط؟
استخدم grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); فتلتف الأعمدة تلقائيًا بحسب المساحة المتاحة.