ملعب CSS Grid بناء CSS Grid بصروري مع عناصر تحكم تفاعلية لأعمدة القالب والصفوف والفراغات.
ملعب CSS Grid
بناء CSS Grid بصروري مع عناصر تحكم تفاعلية لأعمدة القالب والصفوف والفراغات.
حدد هيكل الشبكة
حدد عدد الأعمدة والصفوف، أو أدخل قيم قالب مخصصة.
تعديل المسافات والتوجيه
تحكم في فجوات العمود والصف وضبط تبرير العناصر وتحسينها.
نسخ CSS
معاينة تخطيط الشبكة ونسخ رمز CSS.
What Is ملعب CSS Grid?
مشغل الشبكة CSS هو بناء تفاعلي لتصميمات شبكة CSS، وأقوى نظام تصميم في CSS. توفر الشبكة التحكم ببعدين على الصفوف والأعمدة في نفس الوقت، مما يجعلها مثالية للتصاميم المعقدة للصفحات. يقدم هذا الأداة وضعان: الوضع التلقائي يستخدم repeat(n, 1fr) لشبكات الأعمدة المتساوية البسيطة، بينما يسمح لك الوضع اليدوي بإدخال قيم قالب مخصصة مثل 1fr 2fr 1fr أو 200px auto 200px. يمكنك التحكم في فجوات العمود والصف بشكل مستقل، وضبط justify-items و align-items لتحديد محاذاة المحتوى داخل خلايا الشبكة. يظهر المعاينة المرئية عناصر شبكة ملونة حتى تتمكن من رؤية كيفية عمل تصميم التخطيط الخاص بك بالضبط. هذا الأداة ممتاز للتعلم والتصميم المبدئي لتصاميم الإنتاج.
Why Use ملعب CSS Grid?
-
وضعان آليان ومخصصان للقالب من أجل المرونة
-
مراقبة فجوات العمود والصف المستقلة
-
توجيه العناصر وتحسينها لتوجيه محتوى الخلايا
-
معاينة بصرية تفاعلية مع عناصر شبكة ملونة
Common Use Cases
تصاميم الصفحات
تصميم تصاميم صفحة كاملة مع رأس، شريط جانبي، محتوى وتذييل.
صالات عرض الصور
إنشاء صالات عرض صور شبكية مستجيبة بفجوات منتظمة.
تصاميم لوحة القيادة
بناء تصاميم مكونات لوحة القيادة بمناطق شبكة مختلفة الحجم.
تعلم CSS Grid
التجربة مع خصائص الشبكة لفهم تخطيطات ثنائية الأبعاد.
Technical Guide
تُفعّل الشبكة CSS باستخدام display: grid على حاوية. يحدد grid-template-columns مسارات الأعمدة باستخدام قيم الطول أو وحدات fr (الجزءية) أو وظائف مثل repeat() و minmax(). توزع وحدة fr المساحة المتاحة بشكل متناسب. يعمل grid-template-rows بنفس الطريقة لمسارات الصفوف. يحدد فاصل (أو row-gap و column-gap) الفراغ بين المسارات. تتحكم justify-items و align-items في كيفية محاذاة المحتوى داخل خلايا الشبكة. يمكن لعناصر الشبكة أن تمتد على عدة خلايا باستخدام grid-column: span n و grid-row: span n. توفر المناطق المسمى للشبكة باستخدام grid-template-areas طريقة بصرية لتحديد تصميمات معقدة. تُنشئ الكلمات الرئيسية auto-fit و auto-fill في repeat() تصاميم مستجيبة دون استفسارات الإعلامي: repeat(auto-fit, minmax(250px, 1fr)) تنشئ عددًا من الأعمدة التي تتناسب مع الحد الأدنى لل幅 السعري.
Tips & Best Practices
-
1استخدام وحدات fr للتحجيم النسبي والمرونة للأعمدة
-
2دمج minmax() مع auto-fit لتصاميم مستجيبة بدون استفسارات وسائط
-
3استخدام grid-template-areas لمناطق تخطيط قابلة للقراءة ومسمى
-
4تعيين فجوة بدلاً من الهوامش للحصول على مسافات بين الخلايا المتسقة
Related Tools
مسرح تجريبي ل CSS Flexbox
مستكشف CSS Flexbox المرئي مع عناصر تحكم تفاعلية لجميع خصائص حاوية المرونة.
🎨 CSS & Design
مُولِد الجداول باستخدام CSS
ابني جداول HTML ذات تصاميم جميلة مع ألوان قابلة للتخصيص والشرائط وتأثيرات التمرير.
🎨 CSS & Design
مُولِّد أعمدة CSS
أنشئ تخطيطات نصية متعددة الأعمدة مع عدد أعمدة وفراغ وتحسين نمط قابلين للتخصيص.
🎨 CSS & Design
مُختبر التصميم المرن
معاينة المواقع الإلكترونية في نقاط انقطاع الأجهزة الشائعة باستخدام عارض إطار متضمّن.
🎨 CSS & DesignFrequently Asked Questions
Q ما يعني fr في CSS Grid؟
Q كيف يمكنني جعل شبكة مستجيبة؟
Q هل يمكن للعناصر الشبكية أن تت重ّف؟
Q متى يجب استخدام Grid مقابل Flexbox؟
Q هل يعمل CSS Grid في جميع المتصفحات؟
About This Tool
ملعب CSS Grid is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.