grid-template-columns، grid-template-rows

تعریف واقعی ستون‌ها و ردیف‌ها: grid-template-columns و grid-template-rows

در درس‌های قبل، مفاهیم پایه Grid و اصطلاحات Column، Row، Track و Grid Line رو دیدیم. حالا وقتشه با دو Propertyی آشنا بشیم که واقعاً این ستون‌ها و ردیف‌ها رو می‌سازن؛ همون‌هایی که در درس ۱۳-۱ دیدیم بدون تعریف‌شون، display: grid به‌تنهایی هیچ چیدمان قابل‌مشاهده‌ای ایجاد نمی‌کنه.

grid-template-columns: تعریف ستون‌ها

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

Property به اسم grid-template-columns مشخص می‌کنه Grid دقیقاً چند ستون داشته باشه و هر ستون چه عرضی داشته باشه. در این مثال، هر مقدار (100px) که نوشتیم، معادل یک ستون جداست؛ پس این Rule، سه ستون، هرکدوم به عرض ۱۰۰ پیکسل، می‌سازه.

<div class="container">
  <div>آیتم ۱</div>
  <div>آیتم ۲</div>
  <div>آیتم ۳</div>
  <div>آیتم ۴</div>
</div>

حالا این چهار آیتم، در سه ستونی که تعریف کردیم، پر می‌شن؛ سه‌تای اول در ردیف اول، و آیتم چهارم، چون در همون ردیف اول جا نمی‌شه، به‌طور خودکار در یک ردیف جدید قرار می‌گیره (همون رفتار Auto Placement که در درس ۱۳-۱ بهش اشاره کردیم).

grid-template-rows: تعریف ردیف‌ها

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

Property به اسم grid-template-rows، دقیقاً همون منطق رو داره، ولی برای ردیف‌ها به‌جای ستون‌ها. در این مثال، دو ردیف، هرکدوم به ارتفاع ۸۰ پیکسل، تعریف شده.

نکته مهم: grid-template-rows همیشه ضروری نیست

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  /* grid-template-rows تعریف نشده */
}

اگه grid-template-rows رو تعریف نکنیم، Grid همچنان به‌درستی کار می‌کنه؛ فقط ارتفاع هر ردیف، به‌طور خودکار، بر اساس محتوای داخلی همون ردیف، محاسبه می‌شه (این رفتار خودکار، دقیقاً همون چیزیه که در فصل ۱۳ با عنوان Implicit Grid، در درس‌های بعدی، کامل بررسیش می‌کنیم).

استفاده از واحدهای مختلف

.container {
  display: grid;
  grid-template-columns: 200px 30% 1fr;
}

ستون‌ها می‌تونن هر ترکیبی از واحدهایی که در فصل ۶ دیدیم رو داشته باشن؛ از جمله px (ثابت)، درصد (نسبت به عرض Container)، و مخصوصاً fr که در همون فصل، به‌عنوان واحد اختصاصی Grid معرفی شد. در این مثال، ستون اول همیشه ۲۰۰ پیکسله، ستون دوم ۳۰٪ از عرض Container، و ستون سوم، تمام فضای باقی‌مانده رو می‌گیره (که این دقیقاً همون رفتاری‌ست که در درس ۶-۴ کامل با fr دیدیم).

repeat(): جلوگیری از تکرار دستی

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

وقتی چند ستون یکسان می‌خوایم، به‌جای نوشتن مقدار به‌صورت تکراری، می‌شه از تابع repeat() استفاده کرد. این مثال، دقیقاً معادل grid-template-columns: 100px 100px 100px; است؛ ولی کوتاه‌تر و خواناتر، مخصوصاً وقتی تعداد ستون‌ها زیاد باشه.

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

این الگو، یکی از رایج‌ترین کاربردهای Grid‌ه: چهار ستون کاملاً مساوی، که هرکدوم دقیقاً یک‌چهارم عرض Container رو می‌گیرن؛ دقیقاً شبیه چیزی که در فصل ۶ با ترکیب چند fr برابر دیدیم.

ترکیب repeat() با مقادیر ثابت

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

می‌شه repeat() رو با مقادیر معمولی هم ترکیب کرد؛ در این مثال، یک ستون ثابت ۲۰۰ پیکسلی (مثلاً برای Sidebar)، به‌همراه سه ستون مساوی که فضای باقی‌مانده رو بین خودشون تقسیم می‌کنن.

نام‌گذاری خطوط (Named Grid Lines)

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];
}

یکی از قابلیت‌های جالب grid-template-columns، امکان دادن اسم دلخواه به Grid Lines، به‌جای اکتفا کردن به شماره‌شون (که در درس قبل دیدیم)، است. این اسم‌ها، داخل کروشه ([ ]) نوشته می‌شن و بعداً می‌شه، به‌جای شماره خط، از همین اسم‌ها برای موقعیت‌دهی آیتم‌ها استفاده کرد؛ این تکنیک، خوانایی کد رو مخصوصاً در چیدمان‌های پیچیده، بهبود می‌ده.

مقایسه grid-template-columns و flex-basis (فصل قبل)

یک تفاوت مهم بین Grid و Flexbox که ارزش یادآوری داره: در Flexbox، اندازه هر Flex Item، معمولاً روی خود آیتم (با flex-basis، که در فصل ۱۲ دیدیم) تعریف می‌شد. اما در Grid، اندازه هر ستون یا ردیف، روی خود Grid Container (با grid-template-columns و grid-template-rows) تعریف می‌شه؛ آیتم‌ها، صرف‌نظر از محتوای خودشون، در همون ساختار از پیش تعریف‌شده جا می‌گیرن. این تفاوت مفهومی، یکی از دلایل اصلیه که چرا Grid، برای چیدمان‌های دقیق و ساختاریافته، مناسب‌تر از Flexbox‌ه.

یک مثال کامل: چیدمان یک صفحه ساده

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
}

این مثال، دقیقاً همونیه که در درس ۶-۴ (واحد fr) هم دیدیم، ولی این‌بار با Syntax واقعی Grid: یک ستون ثابت ۲۵۰ پیکسلی (برای Sidebar) و یک ستون انعطاف‌پذیر برای محتوا؛ همراه با یک ردیف ثابت ۸۰ پیکسلی (هدر)، یک ردیف انعطاف‌پذیر (محتوای اصلی)، و یک ردیف ثابت ۶۰ پیکسلی (فوتر).

نکات مهم

• grid-template-columns و grid-template-rows، تعداد و اندازه دقیق ستون‌ها و ردیف‌های یک Grid را تعریف می‌کنند.
• تابع repeat() از تکرار دستی مقادیر یکسان جلوگیری می‌کند و برای ساخت چند ستون یا ردیف مساوی، بسیار پرکاربرد است.
• می‌توان به Grid Lines، به‌جای اتکا به شماره، اسم دلخواه هم داد که خوانایی کد را در چیدمان‌های پیچیده بهبود می‌دهد.

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

• انتظار داشتن چیدمان چندستونه، فقط با display: grid، بدون تعریف صریح grid-template-columns.
• نوشتن دستی و تکراری مقادیر یکسان به‌جای استفاده از تابع repeat()، که کد را طولانی‌تر و کمتر قابل‌نگهداری می‌کند.
• فراموش کردن این‌که grid-template-rows اختیاری است و بدون آن، ارتفاع ردیف‌ها به‌طور خودکار بر اساس محتوا تعیین می‌شود.

جمع‌بندی

grid-template-columns و grid-template-rows، تعداد و اندازه دقیق ستون‌ها و ردیف‌های یک Grid Container را تعریف می‌کنند و می‌توانند هر ترکیبی از واحدهای ثابت، درصدی و fr را بپذیرند. تابع repeat()، نوشتن مقادیر تکراری را ساده می‌کند، و نام‌گذاری Grid Lines، امکان اشاره به خطوط با نام دلخواه به‌جای شماره را فراهم می‌کند؛ این دو Property، پایه‌ی اصلی ساخت هر چیدمان Grid واقعی هستند.