آموزش کامل ماژول Grid Layout در CSS

مقدمه

ماژول Grid Layout در CSS یک روش قدرتمند برای طراحی صفحات شبکه‌ای و چیدمان پیچیده عناصر است. با استفاده از Grid می‌توان به راحتی ستون‌ها و ردیف‌ها را مدیریت کرد و طراحی واکنش‌گرا ایجاد نمود. برای یادگیری کامل CSS و طراحی حرفه‌ای با Grid، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Grid Layout

Grid Layout شامل کانتینر اصلی و آیتم‌های داخلی است که با ستون‌ها و ردیف‌ها سازماندهی می‌شوند. ویژگی‌های اصلی شامل grid-template-columns و grid-template-rows هستند.

تعریف کانتینر با display: grid;
تعیین ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
کنترل فاصله‌ها با gap
قرار دادن آیتم‌ها با grid-column و grid-row

مثال عملی با کد

ساخت یک Grid ساده:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
  gap: 10px;
}

.item {
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

قرار دادن آیتم در ستون و ردیف مشخص:

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Grid واکنش‌گرا:

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

نکات مهم و توضیحات تکمیلی

Grid امکان طراحی دقیق و انعطاف‌پذیر شبکه‌ای را فراهم می‌کند.
ترکیب gap با grid-template باعث فاصله‌دهی منظم بین آیتم‌ها می‌شود.
Grid واکنش‌گرا باعث نمایش صحیح در موبایل و تبلت می‌شود.
Grid و Flexbox می‌توانند با هم ترکیب شوند تا طراحی پیچیده و قابل کنترل ایجاد شود.