راهنما
Container — روی parent
Item — روی children
خطوط Grid
1,1
1,2
1,3
2,1
2,2
2,3
خطوط ستون: 1 → 2 → 3 → 4
خطوط ردیف: 1 → 2 → 3
خط
خطوط ردیف: 1 → 2 → 3
خط
-1 = آخرین خط
واحدهای Grid
frکسری از فضای موجود
autoاندازه بر اساس محتوا
%درصد از container
px/remواحدهای ثابت
min-contentحداقل اندازه محتوا
max-contentحداکثر اندازه محتوا
نمایش زنده
1
2
3
4
5
6
grid-template-columns
justify-items
align-items
gap
grid-auto-rows
ترکیبهای پرکاربرد
۱۲ ستونrepeat(12, 1fr)
۳ ستون مساویrepeat(3, 1fr)
Responsiveauto-fit, minmax
وسطچینplace-items: center
Span 2 ستونgrid-column: span 2
0 property
0 Container
0 Item