آیتم شبکه (Grid Items)
در گرید (Grid)، «آیتم شبکه (Grid Item)» هر فرزند مستقیم کانتینر است. یعنی هر عنصر داخل کانتینر، خودکار آیتم می شود. پس سریع می توانیم چیدمان بسازیم و گسترده کنیم.
آیتم ها و خطوط شبکه
«خط ستون (Column-line)» مرز بین ستون هاست. «خط ردیف (Row-line)» مرز بین ردیف هاست. با شماره این خطوط، شروع و پایان هر آیتم را مشخص می کنیم.
شروع و پایان ستون: grid-column-start/end
با این دو ویژگی جای شروع و پایان آیتم روی ستون ها را می گوییم. مثل گفتن: از خط 1 شروع کن، روی خط 3 تمام شو.
<style>
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
میان بُر ستون: grid-column
«grid-column» میان بُر start و end است. می توانیم با «span» بگوییم چند ستون بگیر.
<style>
.item1 {
grid-column: 1 / span 2;
}
</style>
شروع و پایان ردیف: grid-row-start/end
مشابه ستون ها، این جا شروع و پایان آیتم روی ردیف ها تعیین می شود. یعنی از خط ردیف 1 تا خط 3 برو.
<style>
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
میان بُر ردیف: grid-row
«grid-row» هم میان بُر start و end ردیف است. با «span» تعداد ردیف را می گیریم.
<style>
.item1 {
grid-row: 1 / span 2;
}
</style>
ترکیب ستون و ردیف
می توانیم هم زمان ستون و ردیف را گسترش دهیم. این کار یک کارت بزرگ می سازد.
<style>
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
</style>
مثال شروع سریع
در این نمونه، پنج آیتم داریم. آیتم ها فرزند مستقیم کانتینر هستند.
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
نکته: فقط عناصرِ فرزند مستقیم، آیتم گرید می شوند. نوه ها آیتم نیستند.
گام های تمرینی
- سه ستون با grid-template-columns بساز.
- روی آیتم اول، grid-column: 1 / span 2 بده.
- حالا grid-row: 1 / span 2 را اضافه کن.
- برای آیتم دوم، grid-column-start: 2 بگذار.
- چیدمان را با اعداد خطوط بازی کن.
جمع بندی سریع
- هر فرزند مستقیم، آیتم شبکه است.
- با خطوط، جای آیتم دقیق می شود.
- grid-column و grid-row میان بُر هستند.
- span یعنی چند ستون یا ردیف بگیر.
- می توانی هم زمان ستون و ردیف بگیری.
برای تراز کلی، سر بزن به تراز شبکه. برای فاصله ها، فاصله شبکه را ببین. برای مسیرها، ردیف و ستون شبکه مفید است.