Grid در CSS چیست؟

CSS Grid قدرتمندترین سیستم چیدمان دو‌بعدی در CSS است؛
ابزاری مدرن که به تو اجازه می‌دهد ردیف‌ها و ستون‌های دقیق بسازی و بدون
دردسر، هر نوع صفحه‌ای را طراحی کنی. اگر تا حالا با flex یا float کلنجار رفتی،
وقتشه قفل چیدمان حرفه‌ای رو با Grid باز کنی!

Grid در CSS چه کاری انجام می‌دهد؟

Grid برای ایجاد ساختارهای دو‌بعدی ساخته شده؛ یعنی همزمان می‌تونی
ردیف‌ها (rows) و ستون‌ها (columns) را تعریف و کنترل کنی.
این موضوع باعث می‌شه برای ساخت صفحه‌های پیچیده مثل داشبورد، گالری، قالب وبلاگ
یا حتی لندینگ‌پیج با چندین بخش، به شکل دقیق و بدون hack طراحی کنی.

اصطلاحات کلیدی در CSS Grid

• Grid Container: عنصری که display: grid روی آن اعمال می‌شود.
• Grid Item: فرزندان مستقیم کانتینر.
• Grid Track: خط‌های افقی یا عمودی (row یا column).
• Grid Area: یک یا چند خانه که یک بخش واحد می‌سازند.
• Gap: فاصله بین سطرها و ستون‌ها.

یک مثال ساده از Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.grid-item {
  background: #eee;
  padding: 20px;
  border-radius: 8px;
}
  

در مثال بالا یک چیدمان سه‌ستونه ساختیم که به صورت خودکار در دو ردیف تنظیم می‌شود.
با استفاده از repeat() و 1fr می‌توانی چیدمان واکنش‌گرا، تمیز و
فوق‌العاده منعطف بسازی.

چرا Grid یک انقلاب در چیدمان است؟

برخلاف Flexbox که یک‌بعدی است، Grid بهت کنترل کامل روی هر دو محور می‌دهد.
یعنی با چند خط کد می‌توانی ساختارهایی بسازی که در گذشته با table یا مهندسی
marginهای عجیب ممکن بود. Grid در پروژه‌های واقعی زمان توسعه را کم می‌کند
و چیدمان را منطقی، قابل‌پیش‌بینی و خوانا می‌سازد.

جمع‌بندی

Grid یکی از ضروری‌ترین ابزارهای طراحی مدرن است. با یادگیری کامل آن می‌توانی
هر نوع چیدمان دو‌بعدی را بدون پیچیدگی و بدون ترفندهای اضافی پیاده‌سازی کنی.
از گالری عکس گرفته تا ساختار اصلی صفحه — Grid همیشه بهترین گزینه است.

دعوت‌به‌اقدام (CTA)

با این آموزش، ساخت هر الیهبندی ممکن می‌شود!
اگر می‌خواهی کنترل کامل روی طراحی صفحات داشته باشی، همین حالا این مقاله را بوکمارک کن و قدم‌به‌قدم ادامه بده.