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

ساخت شبکه با CSS Grid: ستون‌ها و سطرها! 📐

سلام دوستان عزیز! توی جلسه قبل با مفهوم کلی CSS Grid و تفاوتش با Flexbox آشنا شدیم. حالا وقتشه که عمیق‌تر بشیم و ببینیم چطور می‌تونیم یه شبکه (Grid) واقعی بسازیم. دو تا از اصلی‌ترین خصوصیت‌هایی که برای تعریف ساختار شبکه روی Grid Container استفاده می‌شن، grid-template-columns و grid-template-rows هستن. با این‌ها، ما مشخص می‌کنیم که گرید ما چند تا ستون و چند تا سطر داشته باشه و اندازه‌ی هر کدوم چقدر باشه. بزن بریم که یاد بگیریم چطور این شبکه رو بسازیم! 🏗️

1. `grid-template-columns`: تعریف ستون‌های شبکه! Column Masters! 🏗️

این خصوصیت تعیین می‌کنه که شبکه‌ی شما چند ستون خواهد داشت و اندازه‌ی هر ستون چقدره. مقادیری که می‌تونید اینجا استفاده کنید خیلی متنوع هستن:

• واحد طول ثابت: مثل px، em، rem. (مثال: grid-template-columns: 100px 200px; یعنی دو ستون داریم، اولی 100 پیکسل و دومی 200 پیکسل.)
• درصد (%): اندازه‌ی ستون بر اساس عرض کل Grid Container. (مثال: grid-template-columns: 50% 50%; یعنی دو ستون مساوی.)
• کلمه کلیدی `auto`: اندازه ستون بر اساس محتوای داخل آیتم‌ها تنظیم می‌شه.
• کلمه کلیدی `fr` (fractional unit): این واحد خیلی کاربردیه! فضاهای خالی رو به نسبت‌های مساوی تقسیم می‌کنه. (مثال: grid-template-columns: 1fr 2fr; یعنی ستون دوم دو برابر ستون اول فضا می‌گیره.)
• تابع `repeat()`: برای تعریف الگوهای تکراری. (مثال: grid-template-columns: repeat(3, 1fr); یعنی سه ستون با اندازه‌ی مساوی.)
• تابع `minmax()`: حداقل و حداکثر اندازه برای ستون. (مثال: grid-template-columns: 100px minmax(200px, 1fr); یعنی ستون اول 100 پیکسل، ستون دوم حداقل 200 پیکسل ولی می‌تونه تا 1fr رشد کنه.)

.grid-container-cols {
  display: grid;
  /* تعریف 3 ستون */
  grid-template-columns: 100px 1fr 2fr; /* ستون اول ثابت، بقیه فضا رو تقسیم می‌کنن */
  gap: 10px; /* فاصله بین ستون‌ها و سطرها */
  background-color: #80deea;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-container-repeat {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 ستون با عرض مساوی */
  gap: 10px;
  background-color: #4dd0e1;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-container-auto {
  display: grid;
  grid-template-columns: auto 1fr auto; /* اولی و سومی بر اساس محتوا، وسطی بقیه رو می‌گیره */
  gap: 10px;
  background-color: #26c6da;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-item {
  background-color: #0097a7;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

استفاده از واحد `fr` واقعاً کار رو برای ایجاد Layoutهای واکنش‌گرا و منعطف خیلی راحت می‌کنه.

2. `grid-template-rows`: تعریف سطرهای شبکه! Row Masters! 🏠

این خصوصیت دقیقاً مثل grid-template-columns عمل می‌کنه، اما برای سطرها! تعیین می‌کنه که شبکه‌ی شما چند سطر خواهد داشت و ارتفاع هر سطر چقدره. مقادیرش هم مشابه هستن:

• واحد طول ثابت: مثل px، em.
• درصد (%): بر اساس ارتفاع کل Grid Container (اگر ارتفاع مشخصی داشته باشه).
• کلمه کلیدی `auto`: ارتفاع سطر بر اساس محتوای داخل آیتم‌ها تنظیم می‌شه.
• کلمه کلیدی `fr`: فضاهای عمودی باقی‌مانده رو تقسیم می‌کنه.
• تابع `repeat()`: برای سطرها هم قابل استفاده است.
• تابع `minmax()`: حداقل و حداکثر ارتفاع برای سطر.

.grid-container-rows {
  display: grid;
  /* تعریف 2 ستون و 3 سطر */
  grid-template-columns: 1fr 1fr; /* دو ستون مساوی */
  grid-template-rows: 80px auto 1fr; /* سطر اول 80px، دوم بر اساس محتوا، سوم بقیه ارتفاع رو می‌گیره */
  gap: 15px;
  height: 400px; /* ارتفاع کل کانتینر مهمه وقتی از fr برای سطرها استفاده می‌کنیم */
  background-color: #80cbc4;
  padding: 15px;
  margin-bottom: 20px;
}

.grid-container-rows-repeat {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 ستون مساوی */
  grid-template-rows: repeat(2, min-content auto); /* دو سطر: اولی حداقل ارتفاع محتوا، دومی بر اساس محتوا */
  gap: 15px;
  background-color: #4db6ac;
  padding: 15px;
  margin-bottom: 20px;
}

.grid-item {
  background-color: #00796b;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

وقتی از `fr` برای سطرها استفاده می‌کنیم، حتماً باید برای Grid Container یه ارتفاع مشخص (مثلاً height یا min-height) تعریف کنیم تا Grid بدونه چقدر فضا رو باید تقسیم کنه.

3. تابع `repeat()` و `auto-fit`/`auto-fill` : کوتاه‌نویسی هوشمندانه! 🤖

برای اینکه کدنویسی خلاصه‌تر بشه، می‌تونیم از تابع repeat() استفاده کنیم. همچنین، ترکیب repeat() با auto-fit یا auto-fill و واحد `px` یا `minmax()`، ابزار فوق‌العاده‌ای برای ساخت گرید‌های ریسپانسیو ایجاد می‌کنه.

• `auto-fit`: ستون‌هایی که جا نمی‌شن، کوچک می‌شن و فضای خالی بین ستون‌های موجود تقسیم می‌شه.
• `auto-fill`: ستون‌هایی که جا نمی‌شن، فضای خالی رو می‌گیرن ولی اگه تعداد زیادی ستون با عرض کم تعریف کنیم، فضاهای خالی ایجاد می‌شه.

.responsive-grid-columns {
  display: grid;
  /* 3 ستون داریم: اولی 1fr، دومی و سومی حداقل 150px باشن ولی اگه جا نبود کوچیک شن */
  grid-template-columns: 1fr repeat(2, minmax(150px, auto));
  gap: 10px;
  background-color: #26a69a;
  padding: 10px;
  margin-bottom: 20px;
}

.responsive-grid-auto-fit {
  display: grid;
  /* سعی کن هر تعداد ستون با حداقل عرض 200px ایجاد کنی، و بقیه فضا رو بینشون تقسیم کن */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  background-color: #00796b;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-item {
  background-color: #00695c;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

ترکیب `repeat(auto-fit, minmax(min, max))` یکی از قوی‌ترین روش‌ها برای ساخت گرید‌هایی هست که به طور خودکار تعداد ستون‌هاشون رو بر اساس عرض صفحه تنظیم می‌کنن.

با استفاده از grid-template-columns و grid-template-rows، شما کنترل کاملی بر روی ساختار ستون‌ها و سطرها در گرید خودتون دارید. این دو خصوصیت، پایه و اساس هر طرح‌بندی CSS Grid هستن. حسابی تمرینشون کنید تا مسلط بشید! موفق باشید! 🌟