grid-column، grid-row، grid-area

موقعیت‌دهی دقیق با شماره خط: grid-column، grid-row و grid-area

در درس قبل، با grid-template-areas دیدیم که چطور می‌شه چیدمان رو با نام‌های بصری تعریف کرد. حالا وقتشه با روش دقیق‌تر و انعطاف‌پذیرتری آشنا بشیم که مستقیماً از شماره Grid Lines (که در درس ۱۳-۲ دیدیم) استفاده می‌کنه؛ روشی که برای موقعیت‌دهی دقیق یا نامتقارن هر Grid Item، ابزار اصلی محسوب می‌شه.

grid-column: تعیین محدوده ستونی یک آیتم

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

Property به اسم grid-column، مشخص می‌کنه یک Grid Item، از کدوم خط ستونی شروع بشه و تا کدوم خط ستونی ادامه پیدا کنه. در این مثال، آیتم از خط ستونی شماره ۱ شروع می‌شه و تا خط شماره ۳ ادامه پیدا می‌کنه؛ یعنی دو ستون کامل (ستون اول و دوم) رو در بر می‌گیره.

grid-row: تعیین محدوده ردیفی یک آیتم

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

دقیقاً همون منطق، برای ردیف‌ها هم صادقه؛ grid-row مشخص می‌کنه آیتم، از کدوم خط ردیفی شروع بشه و تا کدوم خط ادامه پیدا کنه.

یک مثال کامل: آیتمی که چند ستون و چند ردیف را می‌گیرد

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

<div class="container">
  <div class="big-item">آیتم بزرگ</div>
  <div>آیتم عادی</div>
  <div>آیتم عادی</div>
</div>

در این مثال، .big-item، دو ستون و دو ردیف رو با هم اشغال می‌کنه؛ یعنی به‌جای یک خانه معمولی، یک بلوک بزرگ ۲×۲ می‌سازه، در حالی که بقیه آیتم‌ها، همچنان یک خانه معمولی رو اشغال می‌کنن.

کلیدواژه span: تعیین طول به‌جای خط پایانی

.item {
  grid-column: 1 / span 2;
}

به‌جای مشخص کردن دقیق خط پایانی، می‌شه با کلیدواژه span، تعداد Trackهایی که آیتم باید بگیره رو مشخص کرد. در این مثال، grid-column: 1 / span 2، دقیقاً معادل grid-column: 1 / 3 است؛ یعنی «از خط ۱ شروع کن و ۲ ستون رو در بر بگیر».

این روش، مخصوصاً وقتی مفیده که ندونیم دقیقاً خط پایانی چه شماره‌ایه، ولی می‌دونیم آیتم باید چند Track رو بگیره؛ که این حالت، در Gridهای پیچیده یا پویا، بسیار رایج‌تره.

شورت‌هند کوتاه‌تر: فقط یک عدد

.item {
  grid-column: 2;
}

اگه فقط یک عدد بنویسیم (بدون اسلش و بدون مقدار دوم)، آیتم فقط از همون خط شروع می‌شه و دقیقاً یک Track (یک ستون یا ردیف) رو اشغال می‌کنه؛ این حالت، معادل رفتار پیش‌فرضیه که آیتم‌ها، بدون هیچ Property خاصی، به‌طور طبیعی دارن.

استفاده از اعداد منفی: شمارش از انتها

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

Grid یه قابلیت جالب داره: می‌شه از اعداد منفی برای اشاره به خطوط، از انتهای Grid، استفاده کرد. مقدار -1، همیشه به آخرین خط Grid (صرف‌نظر از تعداد دقیق ستون‌ها) اشاره می‌کنه. در این مثال، grid-column: 1 / -1، یعنی «از اولین خط تا آخرین خط»؛ یعنی این آیتم، کل عرض Grid رو، هر تعداد ستونی که داشته باشه، اشغال می‌کنه. این تکنیک، برای عناصری مثل یک هدر یا فوتر که باید همیشه کل عرض رو بگیرن (دقیقاً همون چیزی که در درس قبل با grid-template-areas دیدیم)، جایگزین ساده و انعطاف‌پذیریه.

grid-area: شورت‌هند کامل برای هر چهار مقدار

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

در درس قبل، grid-area رو فقط برای اختصاص یک نام (که در grid-template-areas تعریف شده بود) دیدیم. اما این Property، یه کاربرد دیگه هم داره: می‌تونه به‌عنوان یک شورت‌هند کامل، هر چهار مقدار (خط شروع ردیف، خط شروع ستون، خط پایان ردیف، خط پایان ستون) رو، در یک خط، تعریف کنه.

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

در این مثال، grid-area: 1 / 1 / 3 / 3، دقیقاً معادل نوشتن جداگانه این دو خط است:

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

مقایسه دو کاربرد grid-area

کاربرد	مقدار	کجا استفاده می‌شود
اختصاص نام (درس قبل)	مثل grid-area: header;	در کنار grid-template-areas
شورت‌هند مختصات (این درس)	مثل grid-area: 1 / 1 / 3 / 3;	به‌جای نوشتن جداگانه grid-row و grid-column

یک مثال کامل و ترکیبی

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
}

.header {
  grid-column: 1 / -1;
  grid-row: 1;
}

.sidebar {
  grid-column: 1 / span 1;
  grid-row: 2 / -1;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2 / span 3;
}

در این مثال، .header کل عرض Grid رو می‌گیره (با 1 / -1)، .sidebar فقط یک ستون رو، از ردیف دوم تا آخرین ردیف اشغال می‌کنه، و .main، از ستون دوم تا آخر، سه ردیف رو در بر می‌گیره. این ترکیب، نشون می‌ده چقدر دقیق و انعطاف‌پذیر می‌شه چیدمان‌های پیچیده رو، فقط با شماره خطوط و span، ساخت.

چه زمانی از این روش، به‌جای grid-template-areas استفاده کنیم؟

هر دو روش (نام‌گذاری بصری در درس قبل، و شماره خطوط در این درس)، در نهایت به یک نتیجه می‌رسن؛ انتخاب بین‌شون، بیشتر به سبک کار و پیچیدگی چیدمان بستگی داره. برای چیدمان‌های کلی و ثابت صفحه (مثل هدر/سایدبار/فوتر)، grid-template-areas، به‌خاطر خوانایی بصری‌ش، معمولاً ترجیح داده می‌شه. برای چیدمان‌های پویا، نامتقارن، یا جایی که آیتم‌ها باید دقیقاً و به‌صورت محاسباتی (نه صرفاً نام‌گذاری‌شده) در جای خاصی قرار بگیرن، روش شماره خط و span، انعطاف‌پذیری بیشتری می‌ده.

نکات مهم

• grid-column و grid-row، محدوده یک آیتم را با شماره خط شروع و پایان مشخص می‌کنند.
• کلیدواژه span، به‌جای شماره خط پایانی، تعداد Trackهایی که باید اشغال شوند را مشخص می‌کند.
• مقدار -1، همیشه به آخرین خط Grid اشاره می‌کند؛ صرف‌نظر از تعداد دقیق ستون‌ها یا ردیف‌ها.

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

• قاطی کردن شماره خط با شماره ستون یا ردیف؛ برای n ستون، همیشه n+1 خط وجود دارد.
• فراموش کردن این‌که span، تعداد Track را مشخص می‌کند، نه شماره خط پایانی را.
• نوشتن اشتباه ترتیب مقادیر در شورت‌هند grid-area؛ ترتیب همیشه row-start / column-start / row-end / column-end است.

جمع‌بندی

grid-column و grid-row، با استفاده از شماره Grid Lines (یا کلیدواژه span برای تعیین طول)، امکان موقعیت‌دهی دقیق هر Grid Item را فراهم می‌کنند. grid-area، علاوه بر اختصاص نام (که در درس قبل دیدیم)، می‌تواند به‌عنوان شورت‌هندی برای هر چهار مقدار row-start، column-start، row-end و column-end نیز استفاده شود؛ این روش، مکمل grid-template-areas است و برای چیدمان‌های دقیق و پویا، انعطاف‌پذیری بیشتری فراهم می‌کند.