Developer Tools
Design Tools
Web Utilitiesملعب CSS Grid
أنشئ تخطيطات CSS Grid بصريًا مع معاينة مباشرة ودعم مناطق النموذج وإخراج كود CSS فوري. قم بتهيئة الأعمدة والصفوف والمسافات وموضع العناصر بشكل تفاعلي.
الإعدادات المسبقة
خصائص الحاوية
خصائص العنصر
معاينة مباشرة
CSS الحاوية
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}CSS العناصر
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}أدوات ذات صلة
حول ملعب CSS Grid
كيف يعمل
- قم بتهيئة خصائص الحاوية: grid-template-columns وgrid-template-rows وgap وjustify-items وalign-items وjustify-content وalign-content
- أضف ما يصل إلى 8 عناصر شبكة وضع كل واحد باستخدام grid-column-start/end وgrid-row-start/end
- استخدم تدوين span (مثل span 2) أو أرقام الخطوط الصريحة في حقول النموذج
- قم بمعاينة التخطيط في الوقت الفعلي — انقر على أي عنصر في المعاينة لتحديده في المحرر
- طبّق الإعدادات المسبقة للتخطيطات الشائعة مثل Holy Grail أو Dashboard أو Card Grid، ثم قم بالتخصيص
- انسخ CSS المُنشأ للحاوية والعناصر مباشرة في مشروعك
حالات الاستخدام الشائعة
- تعلم خصائص CSS Grid بشكل تفاعلي مع ردود فعل مرئية فورية
- نمذجة تخطيطات الصفحات: الرؤوس والأشرطة الجانبية ولوحات التحكم وشبكات البطاقات
- تصحيح مشكلات توضع الشبكة عن طريق ضبط أرقام الخطوط بصريًا
- إنشاء CSS شبكة أساسي لأنماط التخطيط الشائعة
- تعليم CSS Grid للطلاب والزملاء
الأسئلة الشائعة
ما هو ملعب CSS Grid؟
ملعب CSS Grid هو أداة متصفح تفاعلية تتيح لك تهيئة جميع خصائص حاوية CSS Grid والعناصر بصريًا. تظهر التغييرات على الفور في المعاينة المباشرة، ويتم إنشاء كود CSS جاهز للاستخدام تلقائيًا لتنسخه في مشروعك.
ما خصائص الحاوية التي يمكن تهيئتها؟
يمكنك تهيئة grid-template-columns وgrid-template-rows وgap (أو column-gap وrow-gap بشكل منفصل) وjustify-items وalign-items وjustify-content وalign-content. تدعم جميع القيم أي صيغة CSS صالحة بما في ذلك وحدات fr وrepeat() وminmax() وauto.
كيف أضع عنصرًا على خطوط محددة؟
حدد العنصر باستخدام علامة التبويب المرقمة في لوحة خصائص العنصر، ثم قم بتعيين grid-column-start وgrid-column-end وgrid-row-start وgrid-row-end. أدخل رقمًا لخط شبكة صريح أو اتركه كـ 'auto' للتوضع التلقائي.
ما هي الإعدادات المسبقة وكيف تستخدمها؟
الإعدادات المسبقة هي تكوينات شبكة مبنية مسبقًا للتخطيطات الشائعة: 'Holy Grail' ينشئ تخطيط رأس/تنقل/رئيسي/جانبي/تذييل الكلاسيكي، 'Sidebar + Main' يبني تخطيط عمودين بشريط جانبي، '3-Col Masonry' يوضح عناصر ممتدة، 'Dashboard' يُظهر لوحة بيانات بأربعة أعمدة، 'Blog Layout' يُعد مقالًا نموذجيًا بشريط جانبي، و'Card Grid' ينشئ شبكة بطاقات ثلاثية الأعمدة متساوية.
ما القيم التي تقبلها grid-template-columns؟
تقبل grid-template-columns أي قائمة مسارات CSS صالحة: الأطوال الثابتة مثل '200px 1fr'، دالة repeat() مثل 'repeat(3, 1fr)'، وminmax() مثل 'repeat(3, minmax(100px, 1fr))'، أو auto-fill أو auto-fit، أو الخطوط المسماة.
ما الفرق بين وحدات fr والبكسل؟
تمثل وحدة fr (الكسرية) جزءًا من المساحة المتاحة في حاوية الشبكة. '1fr 1fr 1fr' تقسم المساحة بالتساوي إلى ثلاثة أعمدة. '2fr 1fr' يمنح العمود الأول ضعف المساحة. قيم البكسل ثابتة بغض النظر عن حجم الحاوية.
ما الفرق بين justify-items وjustify-content؟
يتحكم justify-items في كيفية محاذاة العناصر داخل خلايا الشبكة على طول المحور المضمّن. يتحكم justify-content في كيفية محاذاة الشبكة بأكملها داخل الحاوية عند وجود مساحة إضافية. وبالمثل، يحاذي align-items العناصر داخل الخلايا على المحور الكتلي، بينما يحاذي align-content الشبكة بأكملها عموديًا.
ما هو justify-self وalign-self لعناصر الشبكة؟
يتجاوز justify-self خاصية justify-items لعنصر شبكة واحد، متحكمًا في محاذاته المضمّنة داخل خليته. يتجاوز align-self خاصية align-items لعنصر واحد، متحكمًا في محاذاته الكتلية. كلاهما يقبل: auto وstart وend وcenter وstretch.
كيف أجعل عنصرًا يمتد على عدة أعمدة أو صفوف؟
قم بتعيين grid-column-start وgrid-column-end (أو grid-row-start وgrid-row-end) لإنشاء امتداد. على سبيل المثال، للامتداد من العمود 1 إلى العمود 3، قم بتعيين start=1 وend=3. بدلاً من ذلك، اترك start كـ 'auto' واضبط end على 'span 2' للامتداد على مسارين.
كم عنصر شبكة يمكن إضافته؟
يمكنك إضافة ما يصل إلى 8 عناصر شبكة. انقر على زر '+ إضافة عنصر' لإضافة المزيد. كل عنصر مرمّز بالألوان حتى تتمكن من التعرف عليه في لوحة الإعدادات والمعاينة المباشرة.
هل يمكن استخدام أحجام مسافات مخصصة للأعمدة والصفوف؟
نعم. افتراضيًا، تُطبَّق قيمة gap واحدة على الأعمدة والصفوف. حدد خيار 'استخدام مسافات عمود/صف مخصصة' لتعيين column-gap وrow-gap بشكل مستقل باستخدام شرائح منفصلة.
كيف أنسخ CSS المُنشأ؟
يتوفر زران للنسخ: أحدهما لكتلة CSS الحاوية (.grid-container) والآخر لجميع CSS بما في ذلك قواعد العناصر. انقر على أي زر 'نسخ CSS' لنسخ الكود إلى الحافظة.