همهٔ خصوصیات رایج گرید CSS، دستهبندیشده بر اساس جایی که اعمال میشوند: کانتینر، آیتم و واحدهای اندازهگیری. هر ردیف، خصوصیت را با مقادیر رایج آن همراه میکند.
گرید عناصر را در دو بعد چیدمان میکند: ردیفها و ستونها همزمان. display: grid را روی والد قرار دهید، ترکها را با grid-template-columns و grid-template-rows تعریف کنید و فرزندان را در سلولها جای دهید. از گرید برای چیدمان صفحه و کارتها استفاده کنید؛ از فلکسباکس برای نوارهای یکبعدی. این دو آزادانه با هم ترکیب میشوند.
جدول مرجع · 33 مورد
گرید CSSExplained
33 of 33 rows
کانتینر
grid | inline-grid
عنصر را به کانتینر گرید تبدیل میکند.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
ستونها و عرض آنها را تعریف میکند.
auto 1fr auto
ردیفها و ارتفاع آنها را تعریف میکند.
[main-start] 1fr [main-end]
به خطوط گرید در قالب نام میدهد و آیتمها را با آن نامها جای میدهد.
1rem | 8px 16px
فاصله میان ردیفها و ستونها.
"header header" "nav main"
به سلولها نام میدهد تا جایگذاری خواناتر شود.
"head head" 64px "nav main" 1fr / 200px 1fr
ردیفها، ستونها و ناحیهها را در یک عبارت کوتاه تعیین میکند.
repeat(2, 1fr) / auto-flow 80px
همهٔ خصوصیات ترک و grid-auto-flow را در یک اعلان تعیین میکند.
minmax(80px, auto)
ارتفاع ردیفهایی را تعیین میکند که قالب آنها را تعریف نمیکند.
120px | minmax(0, 1fr)
عرض ستونهایی را تعیین میکند که قالب آنها را تعریف نمیکند.
row | column | row dense
محور آیتمهای جایگذارینشده را انتخاب میکند؛ dense فاصلههای قبلی را پر میکند.
start | center | end | stretch
هر آیتم را در سلول خود در راستای محور ردیف همتراز میکند.
start | center | end | stretch
هر آیتم را در سلول خود در راستای محور ستون همتراز میکند.
center | start end
align-items و justify-items را در یک اعلان تعیین میکند.
start | center | space-between
شبکهٔ ترکها را درون کانتینر در راستای محور ردیف همتراز میکند.
start | center | space-between
شبکهٔ ترکها را درون کانتینر در راستای محور ستون همتراز میکند.
center | end start
align-content و justify-content را در یک اعلان تعیین میکند.
آیتم
1 / 3 | span 2
آیتم را روی ستونها جای میدهد یا روی چند ستون گسترش میدهد.
1 / 2 | span 3
آیتم را روی ردیفها جای میدهد یا روی چند ردیف گسترش میدهد.
grid-column: 2 / -1
خطوط را از انتهای گرید میشمارد؛ -1 خط آخر است.
header | 1 / 1 / 2 / 3
به آیتم نام میدهد یا آن را کامل در یک عبارت کوتاه جای میدهد.
start | center | end | stretch
همین یک آیتم را در سلول خود در راستای محور ردیف همتراز میکند.
start | center | end | stretch
همین یک آیتم را در سلول خود در راستای محور ستون همتراز میکند.
center | start end
align-self و justify-self را در یک اعلان تعیین میکند.
واحدهای اندازهگیری
1fr | 2fr
کسری از فضای آزاد در ترک.
auto | 1fr auto
اندازهٔ ترک را بر پایهٔ محتوایش تعیین میکند؛ همترازی میتواند آن را کش دهد.
min-content | max-content
اندازهٔ ترک را به کوچکترین یا بزرگترین محتوایش تعیین میکند.
fit-content(180px)
اندازهٔ ترک را بر پایهٔ محتوا تعیین میکند اما هرگز از سقف دادهشده فراتر نمیرود.
minmax(200px, 1fr)
ترک را بین یک کمینه و یک بیشینه محدود میکند.
repeat(4, 1fr)
الگوی ترک را بدون نوشتن تکتک، تکرار میکند.
repeat(auto-fit, minmax(120px, 1fr))
تا جایی که جا میشود ترک اضافه میکند؛ auto-fit ترکهای خالی را جمع میکند.
grid-template-columns: subgrid
گرید تودرتو را وادار میکند ترکها و نام خطوط والد را به اشتراک بگذارد.
grid-template-rows: masonry
آزمایشی: آیتمها را بر پایهٔ ارتفاع در ستونها میچیند، نه در ردیفهای ثابت.