آموزش CSS Grid: راهنمای کامل چیدمان دو‌بعدی برای طراحان وب ۲۰۲۵

CSS Grid قدرتمندترین سیستم چیدمان CSS است که به شما اجازه می‌دهد چیدمان‌های دو‌بعدی (سطر و ستون همزمان) بسازید. در این آموزش کامل، از مفاهیم پایه تا تکنیک‌های پیشرفته CSS Grid را با مثال‌های عملی یاد می‌گیرید.

CSS Grid چیست؟

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

مزایای CSS Grid

• چیدمان دو‌بعدی: کنترل همزمان سطر و ستون
• طراحی ریسپانسیو بدون Media Query زیاد با استفاده از fr و auto-fit
• تعریف مناطق نام‌گذاری شده (Grid Areas) برای چیدمان منطقی
• ترازبندی و توزیع فضا به صورت خودکار
• کد تمیزتر و قابل نگهداری‌تر نسبت به Float و Table
• پشتیبانی کامل از تمام مرورگرهای مدرن

Grid در برابر Flexbox

Grid و Flexbox رقیب نیستند، بلکه مکمل یکدیگرند. Flexbox برای چیدمان‌های یک‌بعدی مثل نوار ناوبری (Navbar) و منو عالی است. Grid برای چیدمان‌های دو‌بعدی مثل ساختار کل صفحه (Header, Sidebar, Main, Footer) مناسب‌تر است.

مفاهیم پایه CSS Grid

Grid Container و Grid Items

برای استفاده از Grid، باید یک المان والد را به Grid Container تبدیل کنید:

.container {
  display: grid;
}

المان‌های فرزند این Container به طور خودکار Grid Items می‌شوند.

خطوط Grid (Grid Lines)

خطوط افقی و عمودی که Grid را تشکیل می‌دهند. شماره‌گذاری از ۱ شروع می‌شود. خطوط افقی از بالا به پایین و خطوط عمودی از چپ به راست (یا راست به چپ در RTL) شماره‌گذاری می‌شوند.

مسیرهای Grid (Grid Tracks)

فضای بین دو خط مجاور. مسیرهای افقی سطر (Row) و مسیرهای عمودی ستون (Column) نامیده می‌شوند.

سلول‌ها و مناطق Grid

در تقاطع یک سطر و یک ستون، یک سلول (Cell) قرار دارد. مجموعه‌ای از سلول‌های مجاور یک منطقه (Area) را تشکیل می‌دهند.

تعریف سطرها و ستون‌ها

grid-template-columns

تعداد و اندازه ستون‌ها را تعیین می‌کند:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  /* سه ستون ۲۰۰ پیکسلی */
}

/* استفاده از واحد fr (fraction) */
.container {
  grid-template-columns: 1fr 2fr 1fr;
  /* ستون وسط دو برابر */
}

/* استفاده از repeat */
.container {
  grid-template-columns: repeat(3, 1fr);
  /* سه ستون مساوی */
}

grid-template-rows

تعداد و اندازه سطرها را تعیین می‌کند:

.container {
  grid-template-rows: 100px auto 100px;
  /* سطر اول و سوم ۱۰۰ پیکسل، وسط خودکار */
}

gap (فاصله بین سلول‌ها)

.container {
  gap: 20px;
  /* فاصله افقی و عمودی */
  row-gap: 15px;
  column-gap: 25px;
}

واحدهای مهم در Grid

• fr (Fraction): یک واحد کسری از فضای موجود. 1fr به معنای یک سهم مساوی است.
• auto: اندازه بر اساس محتوا تعیین می‌شود.
• min-content: کوچکترین اندازه ممکن بدون سرریز محتوا.
• max-content: بزرگترین اندازه لازم برای نمایش کامل محتوا.
• minmax(min, max): حداقل و حداکثر اندازه را تعیین می‌کند.

.container {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* ستون‌های ریسپانسیو خودکار */
}

این الگوی فوق‌العاده auto-fit با minmax به شما اجازه می‌دهد کارت‌های ریسپانسیو بسازید بدون نیاز به Media Query.

موقعیت‌دهی Grid Items

grid-column و grid-row

هر Grid Item را می‌توان با تعیین خطوط شروع و پایان موقعیت‌دهی کرد:

.item-1 {
  grid-column: 1 / 3;
  /* از خط ۱ تا خط ۳ (دو ستون) */
  grid-row: 1 / 2;
  /* سطر اول */
}

.item-2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  /* از سطر ۱ تا ۳ در ستون ۳ */
}

span (گسترش)

به جای تعیین خط پایان، می‌توانید تعداد سلول‌ها را تعیین کنید:

.item {
  grid-column: span 2;
  /* دو ستون اشغال می‌کند */
  grid-row: 1;
}

مناطق نام‌گذاری شده (Grid Areas)

یکی از مهم‌ترین ویژگی‌های Grid، امکان نام‌گذاری مناطق چیدمان است. این روش خوانایی کد را به شدت بهبود می‌بخشد:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

قالب HTML منطبق

ترازبندی در Grid

justify-items (ترازبندی افقی)

.container {
  justify-items: start;    /* شروع */
  justify-items: end;      /* پایان */
  justify-items: center;   /* وسط */
  justify-items: stretch;  /* کشش (پیش‌فرض) */
}

align-items (ترازبندی عمودی)

.container {
  align-items: start;     /* بالا */
  align-items: end;       /* پایین */
  align-items: center;    /* وسط */
  align-items: stretch;   /* کشش (پیش‌فرض) */
}

justify-content و align-content (ترازبندی کل Grid)

.container {
  justify-content: space-between;  /* توزیع فضای افقی */
  align-content: center;           /* توزیع فضای عمودی */
}

مثال عملی: ساخت قالب وبلاگ ریسپانسیو

.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 20px;
}

/* دسکتاپ */
@media (min-width: 768px) {
  .blog-layout {
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "sidebar main"
      "sidebar footer";
  }
  .sidebar { grid-area: sidebar; }
  .main-content { grid-area: main; }
  .footer { grid-area: footer; }
}

/* موبایل: همه در یک ستون */
.sidebar, .main-content, .footer {
  width: 100%;
}

مثال: گالری تصاویر ریسپانسیو با auto-fit

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

این گالری به طور خودکار تعداد ستون‌ها را بر اساس عرض صفحه تنظیم می‌کند — بدون یک خط Media Query.

توابع مفید Grid

repeat()

تکرار الگوهای ستونی:

.container {
  grid-template-columns: repeat(4, 1fr);
  /* یا با الگوی متغیر */
  grid-template-columns: repeat(3, 100px 1fr);
}

minmax()

تعیین حداقل و حداکثر اندازه:

.container {
  grid-template-columns: minmax(150px, 1fr) 2fr;
}

CSS Grid و طراحی RTL

برای سایت‌های فارسی و RTL، Grid به طور خودکار با direction: rtl سازگار است. خطوط ستونی راست به چپ مرتب می‌شوند. فقط کافیست:

body {
  direction: rtl;
}
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  /* ستون اول راست، ستون دوم چپ */
}

سوالات متداول

۱. CSS Grid بهتر است یا Flexbox؟

هر کدام کاربرد خاص خود را دارند. Grid برای چیدمان‌های دو‌بعدی (کل صفحه) و Flexbox برای چیدمان‌های یک‌بعدی (منو، نوار ابزار) مناسب‌تر است. ترکیب هر دو بهترین نتیجه را می‌دهد.

۲. آیا CSS Grid در همه مرورگرها پشتیبانی می‌شود؟

بله، CSS Grid در تمام مرورگرهای مدرن (Chrome، Firefox، Safari، Edge) به طور کامل پشتیبانی می‌شود. پشتیبانی از IE11 محدود است و فقط سینتکس قدیمی را می‌شناسد.

۳. چطور با Grid قالب ریسپانسیو بدون Media Query بسازم؟

از الگوی repeat(auto-fit, minmax(min-width, 1fr)) استفاده کنید. این الگو به طور خودکار تعداد ستون‌ها را بر اساس عرض موجود تنظیم می‌کند.

۴. آیا می‌توان Grid و Flexbox را با هم استفاده کرد؟

بله! در واقع این رویکرد توصیه می‌شود. از Grid برای چیدمان کل صفحه و از Flexbox برای چیدمان المان‌های داخل هر منطقه استفاده کنید.

۵. واحد fr در Grid چیست؟

fr مخفف Fraction (کسری) است. 1fr یعنی یک سهم از فضای موجود. 2fr یعنی دو برابر 1fr. این واحد برای توزیع نسبی فضا استفاده می‌شود.

جمع‌بندی

CSS Grid یک ابزار قدرتمند برای طراحی چیدمان‌های دو‌بعدی و ریسپانسیو است. با ویژگی‌هایی مثل grid-template-areas، auto-fit و minmax می‌توانید قالب‌های پیچیده را با کد کم و تمیز بسازید. برای یادگیری بیشتر مقالات زیر را مطالعه کنید:

• آموزش Flexbox در CSS
• آموزش طراحی سایت ریسپانسیو
• Container Queries در CSS
• آموزش HTML و CSS برای مبتدیان