آیتم گرید (Grid Item) در CSS
در چیدمان «گرید (Grid)»، هر فرزند مستقیم کانتینر، یک «آیتم گرید» است. به صورت پیش فرض برای هر ستون در هر سطر یک آیتم داریم؛ اما می توانید با ویژگی های مربوطه، آیتم را روی چند ستون یا چند سطر گسترش دهید.
آیتم گرید چیست؟
کانتینر گرید شامل یک یا چند آیتم است. با ویژگی های grid-column-start و grid-column-end نقطه شروع و پایان آیتم روی ستون ها را مشخص می کنیم.
.item1 { grid-column-start: 1; grid-column-end: 3; }میان بر grid-column
ویژگی grid-column میان بری برای تعیین شروع/پایان ستون است. می توانید از شماره خطوط یا کلیدواژه span استفاده کنید.
.item1 { grid-column: 1 / span 2; }.item1 { grid-column: 1 / 4; }.item2 { grid-column: 2 / span 2; }شروع/پایان سطر: grid-row-start و grid-row-end
برای جای گذاری عمودی از سطرها استفاده کنید؛ با تعیین شروع و پایان، ارتفاع ناحیه اشغال شده کنترل می شود.
.item1 { grid-row-start: 1; grid-row-end: 3; }میان بر grid-row
مانند ستون ها، grid-row نیز از شماره خطوط یا span پشتیبانی می کند.
.item1 { grid-row: 1 / span 2; }.item1 { grid-row: 1 / 4; }grid-area؛ چهار مقدار در یک خط
ویژگی grid-area میان بری برای چهار مقدار است: grid-row-start / grid-column-start / grid-row-end / grid-column-end.
.item4 { grid-area: 1 / 2 / 3 / 2; }.item4 { grid-area: 1 / 1 / span 4 / span 1; }نام گذاری آیتم ها با grid-area
می توانید با grid-area نامی به آیتم بدهید و در کانتینر، با grid-template-areas چیدمان را تعریف کنید.
.item1 { grid-area: myArea; } .grid-container { grid-template-areas: 'myArea myArea myArea . .'; }نکته: نقطه (.) در grid-template-areas یعنی خانه بدون نام.
ترتیب آیتم ها و پاسخ گرا
می توانید ترتیب نمایش را مستقل از ترتیب HTML با مقادیر مکانی تغییر دهید و سپس در نمایشگرهای کوچک با «مدیا کوئری» دوباره بچینید.
/* ترتیب دلخواه */ .item1 { grid-area: 1 / 3; } .item2 { grid-area: 2 / 3; } .item3 { grid-area: 1 / 1; } .item4 { grid-area: 1 / 2; } .item5 { grid-area: 2 / 1; } .item6 { grid-area: 2 / 2; }@media only screen and (max-width: 500px) { .item1 { grid-area: 1 / span 3; } .item2 { grid-area: 3 / 3; } .item3 { grid-area: 2 / 1; } .item4 { grid-area: 2 / 2 / span 2; } .item5 { grid-area: 3 / 1; } .item6 { grid-area: 2 / 3; } }تراز در آیتم: justify-self و align-self
برای هم ترازسازی محتوای یک آیتم روی محور ردیف از justify-self و روی محور ستون از align-self کمک بگیرید.
.item1 { justify-self: right; } .item6 { justify-self: center; }.item1 { align-self: start; } .item6 { align-self: center; }هشدار: اثر justify-self و align-self زمانی دیده می شود که اندازه آیتم اجازه جابه جایی در سلول را بدهد.
مسیر مطالعه و منابع
پیشنهاد می کنیم پیش از این بخش، صفحه کانتینر گرید و همچنین خطوط گرید را مطالعه کنید. برای دید کلی، سراغ معرفی گرید بروید. جهت بهبود سئو، کلیدواژه آیتم گرید را نیز مرور کنید.
منابع بیشتر: MDN: grid-column، MDN: grid-row، MDN: grid-area، MDN: justify-self و MDN: align-self.