هر عنصری سر جای خودش: نحوه قرار دادن آیتم‌ها در گرید

مکان‌یابی دقیق عناصر در Grid: تعیین جایگاه! 📍

سلام به همه! تا اینجا یاد گرفتیم چطور ساختار کلی یه شبکه‌ی Grid رو با grid-template-columns و grid-template-rows بسازیم و فاصله‌ها رو با gap تنظیم کنیم. اما حالا می‌خوایم بریم سراغ مهم‌ترین بخش: چطور هر کدوم از عناصر (Grid Items) رو دقیقاً در جایی که می‌خوایم قرار بدیم؟ برای این کار، خصوصیت‌هایی مثل grid-column-start، grid-column-end، grid-row-start و grid-row-end به کمک ما میان. با این‌ها، می‌تونیم مشخص کنیم هر آیتم از کدوم خط شروع بشه و تا کدوم خط ادامه پیدا کنه. آماده‌اید که استاد مکان‌یابی در Grid بشیم؟ 😎

1. `grid-column-start` و `grid-column-end`: کنترل ستون‌ها! 🏗️

این دو خصوصیت، محل شروع و پایان یک آیتم رو در جهت ستون‌ها (محور افقی) مشخص می‌کنن. یادتونه که خطوط شبکه از چپ به راست (و از بالا به پایین) شماره‌گذاری می‌شن؟ ما از این شماره‌گذاری استفاده می‌کنیم.

• grid-column-start: شماره‌ی خط ستونی که آیتم از اونجا شروع می‌شه.
• grid-column-end: شماره‌ی خط ستونی که آیتم تا اونجا ادامه پیدا می‌کنه.

نکته: اگه آیتم شما مثلاً دو ستون رو اشغال می‌کنه، grid-column-start رو روی شماره‌ی خط اول و grid-column-end رو روی شماره‌ی خط سوم تنظیم می‌کنیم (چون خط سوم، انتهای ستون دوم محسوب می‌شه).

.grid-container-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 ستون */
  gap: 10px;
  height: 150px;
  background-color: #d1c4e9;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-item-col-span {
  /* آیتم اول از خط 1 شروع می‌شه و تا خط 3 تموم می‌شه (یعنی 2 ستون رو اشغال می‌کنه) */
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #7e57c2;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-col-span-2 {
  /* آیتم دوم از خط 3 شروع می‌شه و تا خط 4 تموم می‌شه (یعنی 1 ستون) */
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: #9575cd;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-col-span-3 {
  /* آیتم سوم از خط 4 شروع می‌شه و تا خط 5 تموم می‌شه (یعنی 1 ستون) */
  grid-column-start: 4;
  grid-column-end: 5;
  background-color: #673ab7;
  color: white;
  padding: 20px;
  text-align: center;
}

برای راحتی، می‌تونیم از کلمه کلیدی span هم استفاده کنیم. مثلاً grid-column: span 2; یعنی این آیتم دو ستون رو از جایی که قرار گرفته اشغال کنه.

2. `grid-row-start` و `grid-row-end`: کنترل سطرها! 🏠

این دو خصوصیت هم دقیقاً مثل قبلی‌ها عمل می‌کنن، اما برای سطرها (محور عمودی).

• grid-row-start: شماره‌ی خط افقی که آیتم از اونجا شروع می‌شه.
• grid-row-end: شماره‌ی خط افقی که آیتم تا اونجا ادامه پیدا می‌کنه.

با استفاده از این دو، می‌تونیم آیتم‌ها رو طوری تنظیم کنیم که چند سطر رو اشغال کنن.

.grid-container-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 ستون */
  grid-template-rows: repeat(3, 1fr); /* 3 سطر */
  gap: 10px;
  height: 300px;
  background-color: #d1c4e9;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-item-row-span {
  /* آیتم اول از خط 1 سطر شروع می‌شه و تا خط 3 تموم می‌شه (یعنی 2 سطر رو اشغال می‌کنه) */
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: #7e57c2;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-row-span-2 {
  /* آیتم دوم از خط 3 سطر شروع می‌شه و تا خط 4 تموم می‌شه (یعنی 1 سطر) */
  grid-row-start: 3;
  grid-row-end: 4;
  background-color: #9575cd;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-row-span-3 {
  /* آیتم سوم در سطر دوم قرار می‌گیره (به طور پیش‌فرض) */
  background-color: #673ab7;
  color: white;
  padding: 20px;
  text-align: center;
}

این امکان که یک آیتم بتونه چند ستون یا چند سطر رو اشغال کنه، یکی از قدرت‌های اصلی Grid هست که به ما اجازه می‌ده Layoutهای پیچیده و نامتقارن بسازیم.

3. کوتاه‌نویسی با `grid-column` و `grid-row` 📝

برای اینکه کدنویسی خلاصه‌تر بشه، می‌تونیم از کوتاه‌نویسی grid-column و grid-row استفاده کنیم. این‌ها همون start و end رو در یک خط می‌نویسن.

ساختار کلی: grid-column: start-line / end-line; و grid-row: start-line / end-line;

.grid-container-shorthand {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 ستون */
  grid-template-rows: repeat(3, 1fr); /* 3 سطر */
  gap: 10px;
  height: 300px;
  background-color: #d1c4e9;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-item-shorthand {
  /* همون مثال قبلی: 2 ستون و 2 سطر */
  grid-column: 1 / 3; /* شروع از خط 1، پایان در خط 3 */
  grid-row: 1 / 3;   /* شروع از خط 1، پایان در خط 3 */
  background-color: #7e57c2;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-shorthand-2 {
  /* مثال دیگه: 1 ستون و 1 سطر، ولی در سطر آخر */
  grid-column: 2 / 3; /* ستون دوم */
  grid-row: 3 / 4;   /* سطر سوم */
  background-color: #9575cd;
  color: white;
  padding: 20px;
  text-align: center;
}

استفاده از `span` با این کوتاه‌نویسی‌ها هم خیلی رایجه. مثلاً `grid-column: 1 / span 2;` یعنی از خط 1 شروع کن و دو ستون رو اشغال کن.

4. مکان‌یابی با استفاده از نام نواحی (Grid Areas) 🗺️

یکی دیگه از راه‌های قدرتمند برای مکان‌یابی آیتم‌ها، استفاده از نام نواحی هست که قبلاً با grid-template-areas تعریف کردیم. کافیه اسم ناحیه مورد نظر رو به خصوصیت grid-area آیتم بدیم.

.grid-container-area {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 1fr;
  grid-template-areas:
    "header header sidebar"
    "nav    main   sidebar";
  gap: 10px;
  height: 250px;
  background-color: #d1c4e9;
  padding: 10px;
  margin-bottom: 20px;
}

.grid-item-header {
  grid-area: header; /* قرار دادن در ناحیه header */
  background-color: #7e57c2;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-nav {
  grid-area: nav; /* قرار دادن در ناحیه nav */
  background-color: #9575cd;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-main {
  grid-area: main; /* قرار دادن در ناحیه main */
  background-color: #673ab7;
  color: white;
  padding: 20px;
  text-align: center;
}

.grid-item-sidebar {
  grid-area: sidebar; /* قرار دادن در ناحیه sidebar */
  background-color: #5e35b1;
  color: white;
  padding: 20px;
  text-align: center;
}

استفاده از `grid-area` خیلی خوانایی کد رو بالا می‌بره، چون دیگه لازم نیست شماره خطوط رو مدام چک کنیم؛ اسم نواحی خودش گویای همه چیزه.

با این خصوصیت‌ها، شما کنترل کاملی روی چیدمان هر عنصر در گرید پیدا می‌کنید. می‌تونید آیتم‌ها رو به صورت دستی در هر جایی که می‌خواید قرار بدید، حتی کاری کنید که چند سلول رو اشغال کنن یا در نواحی مشخص شده قرار بگیرن. این نهایت انعطاف‌پذیری در طراحی Layout هست! عالی بود، نه؟ 😉