طراحی شبکه ای با grid در CSS

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

چرا از CSS Grid استفاده کنیم؟

• کنترل دقیق روی ستون‌ها و ردیف‌ها
• پشتیبانی از layout های دو بعدی (Rows & Columns)
• ساده‌تر شدن کد و خوانایی بیشتر نسبت به float یا position
• قابلیت واکنش‌گرا و ترکیب آسان با Flexbox

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

• Grid container: عنصری که display: grid یا inline-grid دارد.
• Grid items: فرزندان مستقیم container که در شبکه قرار می‌گیرند.
• Track: یک ستون یا ردیف شبکه.
• Grid line: خطوط جداکننده ردیف‌ها و ستون‌ها.
• Implicit vs Explicit grid: شبکهٔ تعریف‌شده (explicit) و شبکه‌ای که مرورگر به صورت خودکار بر اساس آیتم‌ها ایجاد می‌کند (implicit).

مثال پایه: ایجاد یک شبکه ساده

/* CSS */.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.item {
  background: #f4f4f8;
  padding: 12px;
  border: 1px solid #ddd;
}

/* HTML */
<div class="container">

&nbsp;
<div class="item">1</div>
&nbsp;
<div class="item">2</div>
&nbsp;
<div class="item">3</div>
&nbsp;
<div class="item">4</div>
&nbsp;
<div class="item">5</div>
&nbsp;
<div class="item">6</div>
&nbsp;

</div>

این مثال سه ستون برابر با استفاده از repeat(3, 1fr) می‌سازد و بین آیتم‌ها فاصله 16px قرار می‌دهد. use of 1fr باعث می‌شود ستون‌ها به‌طور مساوی فضای موجود را تقسیم کنند.

واکنش‌گرایی با auto-fit و minmax

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

در این الگو، هر ستون حداقل 220px و حداکثر 1fr می‌شود و auto-fit باعث می‌شود هرچقدر فضا هست ستون جدید ایجاد یا حذف شود. این الگو برای گالری‌ها و کارت‌ها بسیار مناسب است زیرا به‌صورت خودکار با عرض صفحه سازگار می‌شود.

قراردهی دقیق با grid-area و grid-template-areas

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 12px;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

با grid-template-areas می‌توان نام‌های معنایی برای بخش‌ها تعریف کرد. این روش خوانایی CSS را افزایش می‌دهد و تغییر ساختار صفحه در آینده آسان‌تر می‌شود.

تراز کردن و ترتیب آیتم‌ها

Grid کنترل‌های alignment قدرتمندی دارد: justify-items, align-items, justify-content, align-content و همچنین place-items/place-content برای خلاصه‌نویسی. این ویژگی‌ها به شما اجازه می‌دهند آیتم‌ها را در محورهای X و Y به‌راحتی تراز کنید.

مثال: تراز مرکزی یک آیتم

.centered {
  display: grid;
  place-items: center; /* معادل هر دو align-items و justify-items */  height: 200px;
}

place-items: center آیتم‌ها را هم در محور عمودی و هم افقی در مرکز قرار می‌دهد؛ به‌خصوص برای کارت‌ها یا بنرها مفید است.

مفاهیم پیشرفته و نکات اجرایی

• minmax(): برای محدود کردن اندازه‌های ردیف/ستون کاربردی است (مثلاً minmax(100px, 1fr)).
• implicit grid: زمانی که آیتم‌های بیش از تعداد تعریف‌شده اضافه شوند، مرورگر ردیف/ستون جدید تولید می‌کند؛ این رفتار را می‌توان با grid-auto-rows/columns کنترل کرد.
• nesting: می‌توان داخل یک grid item هم grid جدید تعریف کرد (nested grids) که ترکیب Grid و Flexbox را بسیار قدرتمند می‌کند.
• دسترسی‌پذیری: ترتیب DOM همچنان مهم است؛ از aria-label و semantic HTML برای خوانایی و دسترسی بهتر استفاده کنید.

نمونه ترکیبی: شبکه کارت‌های واکنش‌گرا با header و footer

/* CSS */.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "content"
    "footer";
  min-height: 100vh;
}
.content {
  grid-area: content;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
/* HTML structure */
<div class="app">

&nbsp;

<header class="header">Site Header</header>&nbsp;

<article class="card">...</article>&nbsp;

<article class="card">...</article><!-- more cards -->

<footer class="footer">Site Footer</footer>&nbsp;

</div>

این ساختار امکان داشتن هدر و فوتر ثابت را همراه با محتوای مرکزی که به صورت کارت‌های قابل تغییر نمایش داده می‌شود فراهم می‌کند. grid-template-rows:auto 1fr auto باعث می‌شود محتوای میانی تمام فضای در دسترس را اشغال کند.

جدول خلاصهٔ برخی از خصوصیات مهم

نکات عملیاتی و بهینه‌سازی

• برای پیچیدگی‌های بسیار بالا، شبکه‌ها را به بلوک‌های منطقی تقسیم کنید تا نگهداری آسان باشد.
• ترکیب Grid با Flexbox: از Grid برای layout کلی و از Flex برای تراز داخلی استفاده کنید.
• برای پابلیش در مرورگرهای قدیمی‌تر، از feature queries (@supports) استفاده کنید تا fallbackهای مناسب قرار دهید.
• برای عملکرد بهتر، از اندازه‌گیری‌های منطقی (fr, minmax) استفاده کنید و از محاسبات سنگین جاوااسکریپتی برای layout دوری کنید.

نتیجه‌گیری مختصر

CSS Grid ابزار قدرتمندی است که طراحی‌های پیشرفته و واکنش‌گرا را ساده می‌کند. با یادگیری مفاهیمی مانند track، grid lines، minmax و grid-template-areas می‌توانید طرح‌های منعطف، خوانا و قابل نگهداری بسازید. ترکیب Grid با بهترین شیوه‌های دسترسی و responsive می‌تواند تجربه کاربری سایت شما را به‌طور قابل توجهی ارتقا دهد.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال