Columns، Rows، Tracks، Grid Lines

واژگان پایه Grid: Columns، Rows، Tracks و Grid Lines

در درس قبل، مفهوم کلی Grid Container و Grid Item رو دیدیم و به‌طور گذرا به Grid Line اشاره کردیم. قبل از این‌که به Propertyهای واقعی مثل grid-template-columns برسیم، لازمه چهار اصطلاح پایه‌ای رو کاملاً دقیق تعریف کنیم؛ چون در تمام درس‌های بعدی این فصل، مدام بهشون ارجاع می‌دیم.

یک Grid را از نزدیک تصور کنیم

یک Grid رو مثل یک جدول شطرنجی تصور کن: یه سری خط افقی و یه سری خط عمودی، که با هم، فضا رو به تعدادی خانه (یا سلول) تقسیم می‌کنن. هر بخشی از این ساختار، اسم مخصوص به خودش رو داره.

Columns: ستون‌ها

┌────┬────┬────┐
│    │    │    │
├────┼────┼────┤
│    │    │    │
└────┴────┴────┘
  ستون  ستون  ستون
   ۱      ۲     ۳

Column (ستون)، یک نوار عمودی از فضا در Gridه که از بالا تا پایین Grid Container کشیده شده. در نمودار بالا، سه ستون جداگانه وجود داره.

Rows: ردیف‌ها

┌───────────────┐
│   ردیف ۱      │
├───────────────┤
│   ردیف ۲      │
└───────────────┘

Row (ردیف)، برعکس Column، یک نوار افقی از فضاست که از یک سمت Grid Container تا سمت دیگه‌اش کشیده شده. در نمودار بالا، دو ردیف جداگانه داریم.

Tracks: اصطلاح کلی برای ردیف یا ستون

Track (مسیر)، یک اصطلاح عمومی‌تره که به هر ستون یا هر ردیف، مستقل از این‌که کدوم‌یکی باشه، اشاره می‌کنه. یعنی وقتی می‌گیم «اندازه یک Track»، می‌تونیم منظورمون عرض یک ستون باشه، یا ارتفاع یک ردیف؛ بسته به این‌که درباره کدوم محور صحبت می‌کنیم.

این اصطلاح، مخصوصاً وقتی معنا پیدا می‌کنه که بخوایم درباره Propertyهای عمومی‌تری مثل grid-auto-flow یا مفاهیم اندازه‌گیری (که در درس‌های بعدی می‌بینیم) صحبت کنیم؛ چون این مفاهیم، معمولاً هم برای ردیف‌ها و هم برای ستون‌ها یکسان عمل می‌کنن.

Grid Lines: خط‌های تقسیم‌کننده

  1    2    3    4
  ┌────┬────┬────┐  1
  │    │    │    │
  ├────┼────┼────┤  2
  │    │    │    │
  └────┴────┴────┘  3

Grid Line (خط شبکه)، همون خط‌های فرضی‌ای هستن که ستون‌ها و ردیف‌ها رو از هم جدا می‌کنن. نکته مهم اینجاست: این خط‌ها، شماره‌گذاری می‌شن؛ و همیشه، تعداد خط‌ها، یکی بیشتر از تعداد Trackهاست. یعنی اگه سه ستون داشته باشیم، چهار خط عمودی (شماره ۱ تا ۴) خواهیم داشت؛ چون هر ستون، بین دو خط قرار می‌گیره (خط قبل و خط بعدش).

شماره‌گذاری خط‌ها: از کجا شروع می‌شود؟

شماره‌گذاری Grid Lines، همیشه از عدد 1 شروع می‌شه؛ این عدد، به اولین خط (یعنی لبه شروع Grid، از نظر جهت نوشتار سند که در فصل ۱۱ دیدیم) اشاره می‌کنه. با پیش رفتن به سمت انتهای Grid، این اعداد افزایش پیدا می‌کنن.

دو دسته Grid Line: عمودی و افقی

باید توجه داشت که Grid، در واقع دو مجموعه جداگانه از خط داره:

• Column Lines (خط‌های ستونی): خط‌های عمودی‌ای که ستون‌ها رو از هم جدا می‌کنن.
• Row Lines (خط‌های ردیفی): خط‌های افقی‌ای که ردیف‌ها رو از هم جدا می‌کنن.

شماره‌گذاری این دو دسته، کاملاً مستقل از همه؛ یعنی خط ستونی شماره ۲ و خط ردیفی شماره ۲، دو خط کاملاً متفاوت و در دو جهت مختلفن.

چرا این مفاهیم اینقدر مهم‌اند؟

.item {
  grid-column: 1 / 3;
}

در درس‌های بعدی همین فصل، وقتی با Propertyهایی مثل grid-column و grid-row آشنا بشیم، خواهیم دید که موقعیت دقیق هر Grid Item، معمولاً با اشاره مستقیم به شماره همین Grid Lines تعریف می‌شه؛ نه با اشاره به نام یا شماره خود ستون یا ردیف. یعنی وقتی می‌نویسیم grid-column: 1 / 3، در واقع می‌گیم: «این آیتم، از خط ستونی شماره ۱ شروع بشه، و تا خط ستونی شماره ۳ ادامه پیدا کنه»؛ که این یعنی، این آیتم، دو ستون کامل (ستون اول و دوم) رو در بر می‌گیره.

یک مثال بصری کامل با شماره‌گذاری خطوط

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 80px 80px;
}

  خط۱  خط۲  خط۳  خط۴
  ┌────┬────┬────┐  خط۱
  │ستون│ستون│ستون│
  │ ۱  │ ۲  │ ۳  │
  ├────┼────┼────┤  خط۲
  │    │    │    │
  └────┴────┴────┘  خط۳

در این مثال، سه ستون تعریف کردیم؛ پس چهار خط ستونی (۱ تا ۴) خواهیم داشت. همچنین دو ردیف تعریف کردیم؛ پس سه خط ردیفی (۱ تا ۳) خواهیم داشت. این اعداد، دقیقاً همون چیزیه که در درس‌های بعدی، برای قرار دادن دقیق هر آیتم، ازشون استفاده می‌کنیم.

جدول جمع‌بندی چهار اصطلاح

اصطلاح	تعریف
Column	یک نوار عمودی از فضا در Grid
Row	یک نوار افقی از فضا در Grid
Track	اصطلاح عمومی برای هر ستون یا هر ردیف
Grid Line	خط فرضی و شماره‌گذاری‌شده‌ای که Trackها را از هم جدا می‌کند؛ تعدادش همیشه یکی بیشتر از تعداد Trackهاست

نکات مهم

• Track اصطلاحی عمومی برای اشاره به هر ستون یا ردیف است، مستقل از جهت آن.
• تعداد Grid Lines در هر محور، همیشه دقیقاً یکی بیشتر از تعداد Trackهای همان محور است.
• شماره‌گذاری Grid Lines، از عدد ۱ شروع می‌شود و ستونی و ردیفی، مستقل از هم شماره‌گذاری می‌شوند.

اشتباهات رایج

• فراموش کردن این‌که تعداد خطوط، همیشه یکی بیشتر از تعداد ستون‌ها یا ردیف‌هاست؛ مثلاً برای سه ستون، چهار خط وجود دارد، نه سه‌تا.
• قاطی کردن شماره‌گذاری خطوط ستونی و ردیفی؛ این دو، دو سیستم شماره‌گذاری کاملاً مستقل هستند.
• تصور اینکه شماره‌گذاری خطوط، از صفر شروع می‌شود؛ در حالی که همیشه از یک شروع می‌شود.

جمع‌بندی

Column ستون، Row ردیف، Track اصطلاح عمومی برای هرکدام از این دو، و Grid Line خط فرضی و شماره‌گذاری‌شده‌ای است که این Trackها را از هم جدا می‌کند؛ با این قاعده که تعداد خطوط، همیشه یکی بیشتر از تعداد Trackهاست. این اصطلاحات، پایه‌ی اصلی درک Propertyهای واقعی Grid، مثل grid-template-columns و grid-column، در درس‌های بعدی این فصل خواهند بود.