CSS Grid Lines
CSS Grid Lines (خطوط گرید)
—
چی هستن خطوط گرید؟
در CSS Grid، خطوط (Grid Lines) خطوطی فرضی هستن که ستونها و ردیفها رو از هم جدا میکنن. این خطوط برای تعیین محل قرارگیری آیتمها استفاده میشن.
* خطوط عمودی: خطوطی که ستونها رو جدا میکنن.
* خطوط افقی: خطوطی که ردیفها رو جدا میکنن.
—
شمارهگذاری خطوط
خطوط به صورت عددی شمارهگذاری میشن:
* خطوط ستونها از چپ به راست شماره میگیرن.
* خطوط ردیفها از بالا به پایین شمارهگذاری میشن.
مثلاً اگر ۳ ستون داشته باشیم، خطوط ستونها از 1 تا 4 شمارهگذاری میشن (چون n ستون، n+1 خط داریم).
—
استفاده از خطوط در CSS
برای قرار دادن آیتم در گرید، میتونیم از خطوط شروع و پایان استفاده کنیم:
* `grid-column-start`
* `grid-column-end`
* `grid-row-start`
* `grid-row-end`
یا به صورت خلاصه:
* `grid-column: start / end;`
* `grid-row: start / end;`
مثال:
“`css
.item {
grid-column: 2 / 4; /* از خط ستون ۲ شروع و تا خط ستون ۴ ادامه دارد */
grid-row: 1 / 3; /* از خط ردیف ۱ شروع و تا خط ردیف ۳ ادامه دارد */
}
“`
—
نکات مهم درباره خطوط
* عدد **start** کمتر از عدد **end** است.
* میتوان به جای شماره مثبت، از اعداد منفی استفاده کرد. اعداد منفی از انتهای گرید به سمت ابتدا شمارش میشن.
مثال استفاده از عدد منفی:
“`css
.item {
grid-column: –3 / –1;
}
“`
یعنی از سومین خط ستون از سمت راست شروع تا خط دوم از سمت راست.
—
خلاصه:
| خاصیت | کاربرد |
| ——————- | ——————————————- |
| `grid-column-start` | تعیین خط شروع ستون |
| `grid-column-end` | تعیین خط پایان ستون |
| `grid-row-start` | تعیین خط شروع ردیف |
| `grid-row-end` | تعیین خط پایان ردیف |
| `grid-column` | خلاصه `grid-column-start / grid-column-end` |
| `grid-row` | خلاصه `grid-row-start / grid-row-end` |
—
یک مثال کامل
“`css
.container {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item1 {
grid-column: 1 / 3; /* اشغال ستون 1 و 2 */
grid-row: 1 / 2;
}
.item2 {
grid-column: 3 / 5; /* اشغال ستون 3 و 4 */
grid-row: 2 / 4; /* اشغال ردیف 2 و 3 */
}
“`
دیدگاهتان را بنویسید