مولد شبكة CSS
قم بتحديد الأعمدة والصفوف والفجوات بشكل مرئي، ثم انسخ رمز قالب CSS Grid للتخطيط الخاص بك.
CSS Grid Generator
Live1
2
3
4
5
6
7
8
9
CSS output
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px;
Key capabilities
- قم بتحديد الأعمدة والصفوف والفجوات بشكل مرئي، ثم انسخ كود قالب CSS Grid.
- يعمل في المتصفح الخاص بك
- مجاني للاستخدام
كيفية الاستخدام
- تعيين عدد الأعمدة والصفوف.
- ضبط الفجوة وحجم المسار.
- انسخ شبكة CSS.
How this tool works
- تعيين عدد الأعمدة والصفوف.
- ضبط الفجوة وحجم المسار.
- انسخ شبكة CSS.
Recommended settings
- استخدم الخيارات الافتراضية أولاً، ثم اضبطها إذا لزم الأمر
Supported formats
Text / on-page input
File size and limits
- قد تبدو المعاينات المعقدة للغاية ومتعددة الطبقات أبطأ على الهواتف القديمة.
Privacy
تعمل مولدات الألوان وCSS بالكامل في متصفحك. لا تقوم المعاينات والتحويلات أبدًا بتحميل أنماطك.
Common use cases
- استخدم CSS Grid Generator متى شئت: حدد الأعمدة والصفوف والفجوات بشكل مرئي، ثم انسخ كود قالب CSS Grid.
Troubleshooting
تبدو المعاينة مختلفة بعد اللصق
تحقق من وجود CSS منافس على صفحتك (إعادة التعيين، الألوان الموروثة). انسخ القاعدة التي تم إنشاؤها إلى ورقة أنماط معزولة أولاً.
الأسئلة الشائعة
هل يؤدي هذا إلى تحميل CSS الخاص بي؟
لا. يتم تشغيل المولدات والمحولات في متصفحك من خلال المعاينة المباشرة.
هل أحتاج إلى حساب؟
لا، افتح الأداة، وقم بتعديل عناصر التحكم، وانسخ ملف CSS.
أدوات ذات صلة
Flexbox Generator
Experiment with flex direction, wrap, justify, and align — see layouts update live.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolBox Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open tool