CSS Grid: نسل جدید چیدمان سایت! (طرح‌بندی ۲ بُعدی)

CSS Grid: دنیای جادوی چیدمان دوبعدی! ✨

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

1. CSS Grid چیست؟ طرح‌بندی دوبعدی حرفه‌ای! 🖼️

CSS Grid Layout یک سیستم طرح‌بندی صفحه است که برای مدیریت سطرها و ستون‌ها طراحی شده. برخلاف Flexbox که روی چیدمان عناصر در یک محور (ردیف یا ستون) تمرکز داره، Grid به شما اجازه می‌ده همزمان هم سطرها و هم ستون‌ها رو تعریف کنید و آیتم‌ها رو دقیقاً در محل مورد نظرتون قرار بدین. این یعنی کنترل بی‌نهایت بر روی چیدمان صفحه!

کاربردهای اصلی Grid:

• ساخت طرح‌بندی کلی صفحات وب (Header, Footer, Sidebar, Main Content).
• چیدمان گالری تصاویر یا کارت‌ها در شبکه‌ای منظم.
• ایجاد Layoutهای پیچیده که نیاز به هم‌ترازی هم در سطر و هم در ستون دارن.

2. تفاوت کلیدی Flexbox و Grid: تک‌بعدی در مقابل دوبعدی! 🆚

این دو مدل طرح‌بندی، هر دو فوق‌العاده قدرتمند هستن، اما برای کارهای متفاوتی ساخته شدن:

• Flexbox: عمدتاً برای چیدمان عناصر در یک بعد (یک ردیف یا یک ستون) طراحی شده. عالی برای توزیع فضا بین آیتم‌ها در یک راستا و هم‌ترازی اون‌ها. مثال: Navbar، لیست آیتم‌ها، فرم‌ها.
• Grid: برای چیدمان عناصر در دو بعد (هم سطر و هم ستون) طراحی شده. عالی برای ساخت طرح‌بندی کلی صفحه و کنترل دقیق محل قرارگیری هر آیتم در یک شبکه. مثال: Layout کلی صفحه، گالری تصاویر.

نکته مهم: این دو مدل همدیگه رو نقض نمی‌کنن! شما می‌تونید از Flexbox برای چیدمان آیتم‌های داخل یک سلول Grid استفاده کنید، و یا از Grid برای چیدمان کانتینرهایی که داخل یک آیتم Flexbox قرار دارن. ترکیب این دو، قدرت بی‌نظیری به شما می‌ده!

3. اصطلاحات کلیدی Grid: کانتینر و آیتم 📦

مثل Flexbox، Grid هم دو مفهوم اصلی داره:

• Grid Container: عنصری که خصوصیت display: grid; یا display: inline-grid; بهش داده می‌شه.
• Grid Items: فرزندان مستقیمِ Grid Container که در سلول‌های شبکه قرار می‌گیرن.

.grid-container {
  display: grid; /* این عنصر رو به یه کانتینر گرید تبدیل می‌کنه */
  grid-template-columns: 1fr 1fr 1fr; /* تعریف 3 ستون با عرض مساوی */
  grid-template-rows: auto 1fr auto; /* تعریف 3 سطر */
  gap: 15px; /* فاصله بین آیتم‌ها */
  background-color: #ffcdd2;
  padding: 15px;
}

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

4. مفاهیم اساسی Grid: خطوط، سلول‌ها و مناطق! 📍

برای کار با Grid، باید با این مفاهیم آشنا بشیم:

• Grid Lines: خطوط افقی و عمودی که شبکه رو تشکیل می‌دن. شماره‌گذاری از 1 شروع می‌شه.
• Grid Tracks: فضای بین دو خط موازی (یعنی ستون‌ها یا سطرها).
• Grid Cells: کوچکترین واحد شبکه، تقاطع یک سطر و یک ستون.
• Grid Areas: نواحی مستطیلی شکل که از ترکیب چند سلول تشکیل می‌شن و می‌تونیم آیتم‌ها رو به صورت مستقیم به اون‌ها اختصاص بدیم.

تنظیمات Grid Container مثل grid-template-columns، grid-template-rows و gap، ساختار کلی شبکه رو تعیین می‌کنن.

.complex-grid {
  display: grid;
  grid-template-columns: 100px 1fr 2fr; /* ستون اول 100px، بقیه فضا رو تقسیم می‌کنن */
  grid-template-rows: 80px 150px; /* سطر اول 80px، سطر دوم 150px */
  grid-template-areas:
    "header header sidebar" /* سطر اول */
    "main   main   sidebar"; /* سطر دوم */
  gap: 10px;
  height: 300px; /* برای نمایش بهتر */
  background-color: #f8bbd0;
}

.grid-item-area {
  padding: 20px;
  color: white;
  text-align: center;
  border-radius: 5px;
}

.header {
  grid-area: header; /* اختصاص به ناحیه header */
  background-color: #e91e63;
}

.main-content {
  grid-area: main; /* اختصاص به ناحیه main */
  background-color: #f48fb1;
}

.sidebar {
  grid-area: sidebar; /* اختصاص به ناحیه sidebar */
  background-color: #ec407a;
}

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

5. چه زمانی از Grid و چه زمانی از Flexbox استفاده کنیم؟ 🤔

این سوال مهمیه!

• برای طرح‌بندی کلی صفحه، Layoutهای پیچیده و چیدمان دوبعدی: از CSS Grid استفاده کنید.
• برای توزیع فضا بین آیتم‌ها در یک ردیف یا ستون، هم‌ترازی عناصر در یک محور: از Flexbox استفاده کنید.
• برای ساخت عناصر UI مثل Navbar، دکمه‌ها، کارت‌ها: Flexbox معمولاً ساده‌تر و کافی است.
• ترکیب! بسیاری از Layoutهای مدرن از Grid برای ساختار کلی و از Flexbox برای جزئیات داخل اون Grid استفاده می‌کنن.

CSS Grid یک ابزار فوق‌العاده برای ساخت Layoutهای قدرتمند و انعطاف‌پذیره. با درک تفاوتش با Flexbox و شناخت اصطلاحاتش، می‌تونید طرح‌بندی‌های خلاقانه و حرفه‌ای رو به راحتی پیاده‌سازی کنید. وقتشه که Grid رو امتحان کنید! 🚀