ساحة اختبار CSS Grid

حول ساحة اختبار CSS Grid

ملعب CSS Grid يؤلّف تخطيطات شبكة حقيقية بصرياً. أضف وأزل مسارات أعمدة وصفوف لتشكيل grid-template-columns وgrid-template-rows، واضبط فراغات الأعمدة والصفوف، واضبط خصائص المحاذاة الأربع جميعها — justify-items وalign-items وjustify-content وalign-content — بينما تعكس المعاينة كل تغيير فوراً.

وضع العناصر هو ما يجعل الشبكات قوية: أضف عناصر، وانقر أحدها في المعاينة لتحديده، وضعه ببداية العمود، وامتداد العمود، وبداية الصف، وامتداد الصف. هذه هي الطريقة التي تمتد بها الأشرطة الجانبية والرؤوس والخلايا المميزة عبر مسارات متعددة — التقنية وراء تقريباً كل تخطيط شبكة واقعي.

ثلاثة إعدادات مسبقة — holy grail وdashboard وgallery — تحمّل هياكل صفحات كلاسيكية يمكنك تحليلها وتكييفها. عندما يكون التخطيط صحيحاً، انسخ CSS المُولَّد، الذي يحتوي على قواعد حاوية الشبكة الكاملة ووضع كل عنصر.

كيفية استخدام ساحة اختبار CSS Grid

1. أضف أو أزل مسارات أعمدة وصفوف لتحديد قالب الشبكة.
2. اضبط فراغ الأعمدة وفراغ الصفوف.
3. اضبط عناصر تحكم المحاذاة: justify-items وalign-items وjustify-content وalign-content.
4. أضف عناصر، وانقر أحدها في المعاينة، واضبط بداية/امتداد العمود والصف لوضعه.
5. حمّل إعداد holy grail أو dashboard أو gallery المسبق لدراسة تخطيط كلاسيكي.
6. انسخ CSS المُولَّد إلى ورقة الأنماط الخاصة بك.

الأسئلة الشائعة