ملعب CSS Grid الاحترافي
أقوى أداة لتصميم شبكات CSS المعقدة بصرياً. تحكم في الأعمدة والصفوف والمحاذاة بدقة متناهية.
إعدادات الشبكة
الفجوات (Gap)16px
1
2
3
4
5
6
كود CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
justify-items: stretch;
align-items: stretch;
}
نصائح لـ CSS Grid
fr Unit
وحدة القياس fr تمثل جزءاً من المساحة المتبقية داخل الحاوية.
repeat()
استخدم دالة repeat لإنشاء عدد معين من الأعمدة بنفس القياس بسهولة.
span X
استخدم span متبوعاً برقم لجعل العنصر يغطي عدداً معيناً من الأعمدة/الصفوف.
gap
يتحكم في المسافات بين العناصر دون الحاجة لاستخدام margin.