Grid

مدتها از فلکس باکس استفاده میکردم و در مقابل یادگیری گرید مقاومت می کردم چون تقریبا هر کاری میخواستم انجام بدم رو میتونستم در بیارم ، ولی خب منطقا اگر یه چیزی خوب نباشه اونقدر معروف نمیشه ، توی اکثر پروژه های بزرگ ، توی فیگما و جاهای دیگه میدیدم به وفور ازش استفاده میشه
پس رفتم تو کارش تا ببینم دقیقا این گرید چیه و کجاها میشه ازش استفاده کرد
اینو که خوندید حتما بعدش پست تفاووت های گرید و فلکس باکس هم ببینید اونجا توضیح دادم که بهتره از هر کدوم کجا استفاده شه .

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

CSS Grid چیه و چرا این‌قدر به درد می‌خوره؟

اگه تا حالا با CSS کار کرده باشی، احتمالاً برای چیدن آیتم‌ها کنار هم از چیزایی مثل float، inline-block یا flexbox استفاده کردی. اینا هنوزم کاربرد دارن، ولی وقتی بحث طراحی صفحه‌های چندستونه، گریدهای منظم، چیدمان‌های پیچیده و ریسپانسیو وسط میاد، CSS Grid واقعاً کار رو خیلی راحت‌تر می‌کنه.

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

---

فرق CSS Grid با Flexbox چیه؟

خیلی‌ها اولش فکر می‌کنن Grid اومده جای Flexbox رو بگیره، ولی این‌طوری نیست. هر کدوم جای خودشون رو دارن.

• Flexbox بیشتر برای چیدن آیتم‌ها در یک جهت خوبه؛ مثلاً یه ردیف دکمه، منوی افقی، کارت‌های کنار هم یا وسط‌چین کردن یه عنصر.
• CSS Grid برای ساختن layoutهای کامل‌تر خوبه؛ مثلاً صفحه‌ای که هدر، سایدبار، محتوای اصلی و فوتر داره.

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

ساختار اصلی CSS Grid

برای استفاده از Grid، اول باید به عنصر والد بگی که قراره تبدیل به یه گرید بشه. این کار با display: grid انجام می‌شه.

.container {
  display: grid;
}

بعدش می‌تونی مشخص کنی چندتا ستون یا ردیف داشته باشه. مثلاً اینجا یه گرید سه‌ستونه می‌سازیم:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

واحد fr یعنی سهمی از فضای آزاد. وقتی می‌نویسی 1fr 1fr 1fr، یعنی فضا بین سه ستون به‌صورت مساوی تقسیم بشه.

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

فرض کن چندتا کارت محصول داریم و می‌خوایم اونا رو توی سه ستون کنار هم نشون بدیم.

<div class="grid-container">
  <div class="card">محصول ۱</div>
  <div class="card">محصول ۲</div>
  <div class="card">محصول ۳</div>
  <div class="card">محصول ۴</div>
  <div class="card">محصول ۵</div>
  <div class="card">محصول ۶</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: #f2f2f2;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

اینجا با repeat(3, 1fr) گفتیم سه تا ستون مساوی بساز. با gap: 20px هم بین کارت‌ها فاصله گذاشتیم.

خاصیت gap در CSS Grid

یکی از چیزای خیلی خوش‌دست توی Grid، خاصیت gap هست. قبلاً برای فاصله انداختن بین آیتم‌ها باید کلی با margin سروکله می‌زدیم، ولی الان خیلی راحت می‌تونیم فاصله بین ستون‌ها و ردیف‌ها رو مشخص کنیم.

.container {
  display: grid;
  gap: 16px;
}

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

.container {
  display: grid;
  row-gap: 20px;
  column-gap: 30px;
}

استفاده از repeat در Grid

وقتی تعداد ستون‌ها زیاده، نوشتن پشت سر هم 1fr خیلی خسته‌کننده می‌شه. اینجاست که repeat به دادمون می‌رسه.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

این یعنی چهار ستون بساز که هر کدوم یه سهم مساوی از فضا بگیرن.

طراحی ریسپانسیو با CSS Grid

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

مثلاً این کد باعث می‌شه کارت‌ها خودشون با توجه به فضای موجود تنظیم بشن:

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

اینجا minmax(250px, 1fr) یعنی هر ستون حداقل ۲۵۰ پیکسل باشه، ولی اگه فضا بیشتر بود، کش بیاد و سهم خودش رو بگیره. auto-fit هم کمک می‌کنه تعداد ستون‌ها خودکار بر اساس عرض صفحه تنظیم بشه.

تفاوت auto-fit و auto-fill

دو تا مقدار معروف توی Grid هستن که خیلی استفاده می‌شن: auto-fit و auto-fill. اینا شبیه همن، ولی یه تفاوت کوچیک دارن.

• auto-fill تا جایی که جا داشته باشه ستون می‌سازه، حتی اگه بعضی ستون‌ها خالی بمونن.
• auto-fit ستون‌های خالی رو جمع می‌کنه و فضای باقی‌مونده رو بین آیتم‌های موجود پخش می‌کنه.

برای بیشتر طراحی‌های کارت‌محور، معمولاً auto-fit انتخاب بهتریه، چون ظاهر جمع‌وجورتری می‌ده.

چیدن آیتم‌ها با grid-column و grid-row

با CSS Grid فقط قرار نیست همه آیتم‌ها یه اندازه باشن. می‌تونی بگی یه آیتم چند ستون یا چند ردیف رو اشغال کنه.

.item-large {
  grid-column: span 2;
}

این یعنی آیتمی که کلاس item-large داره، به‌جای یه ستون، دو ستون رو بگیره.

.item-tall {
  grid-row: span 2;
}

اینم یعنی آیتم دو ردیف ارتفاع بگیره. این ویژگی برای ساختن گالری عکس، داشبورد، کارت‌های ویژه و layoutهای نامتقارن خیلی کاربردیه.

<style>
.item-large {
        grid-column: span 2;
        background: #e74c3c; /*رنگ قرمزه*/
      }
      .item-tall {
        grid-row: span 2;
        background: #2ecc71; /* سبز رنگه */
      }
</style>
      <div class="container">
        <div class="box item-large">گرفتن ۲ ستون (item-large)</div>
        <div class="box">آیتم عادی</div>
        <div class="box item-tall">گرفتن ۲ ردیف (item-tall)</div>
        <div class="box">آیتم عادی</div>
        <div class="box">آیتم عادی</div>
        <div class="box">آیتم عادی</div>
      </div>

👆🏼 که میشه 👇🏼

ساخت layout کامل صفحه با Grid

حالا بیایم یه layout ساده برای صفحه بسازیم که هدر، سایدبار، محتوای اصلی و فوتر داشته باشه.

<div class="page-layout">
  <header class="header">هدر</header>
  <aside class="sidebar">سایدبار</aside>
  <main class="content">محتوای اصلی</main>
  <footer class="footer">فوتر</footer>
</div>

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  min-height: 100vh;
  gap: 16px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

اینجا با grid-template-areas خیلی خوانا مشخص کردم هر بخش صفحه کجا قرار بگیره. این روش مخصوصاً برای layoutهای اصلی سایت خیلی تمیز و قابل فهمه.

ریسپانسیو کردن layout صفحه

برای موبایل بهتره سایدبار بیاد زیر هدر یا زیر محتوا قرار بگیره. با media query خیلی راحت می‌تونیم چیدمان رو عوض کنیم.

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

این یعنی وقتی عرض صفحه کمتر از ۷۶۸ پیکسل شد، همه بخش‌ها تک‌ستونه بشن و زیر هم قرار بگیرن.

مرتب‌سازی آیتم‌ها داخل Grid

CSS Grid کلی خاصیت برای تراز کردن آیتم‌ها داره. مثلاً می‌تونی آیتم‌ها رو از نظر افقی یا عمودی وسط‌چین کنی.

.container {
  display: grid;
  place-items: center;
}

خاصیت place-items یه میان‌بره برای align-items و justify-items. یعنی آیتم‌ها رو هم عمودی و هم افقی تنظیم می‌کنه.

• justify-items آیتم‌ها رو در جهت افقی کنترل می‌کنه.
• align-items آیتم‌ها رو در جهت عمودی کنترل می‌کنه.
• place-items هر دوتاش رو با هم تنظیم می‌کنه.

چندتا خاصیت مهم CSS Grid

خاصیت	کاربرد
display: grid	فعال کردن حالت گرید روی والد
grid-template-columns	تعریف ستون‌ها
grid-template-rows	تعریف ردیف‌ها
gap	فاصله بین آیتم‌ها
grid-column	کنترل جایگاه یا اندازه آیتم در ستون‌ها
grid-row	کنترل جایگاه یا اندازه آیتم در ردیف‌ها
grid-template-areas	ساخت layout با اسم‌گذاری بخش‌ها
place-items	تراز کردن آیتم‌ها در مرکز یا جهت‌های دیگه

مزایای CSS Grid

• برای ساختن layoutهای پیچیده خیلی تمیز و ساده‌ست.
• هم ستون‌ها رو کنترل می‌کنه، هم ردیف‌ها رو.
• برای طراحی ریسپانسیو خیلی قدرتمنده.
• کدها رو خواناتر و مرتب‌تر می‌کنه.
• نیازی به استفاده زیاد از margin و float نداری.
• با Flexbox هم خیلی خوب کنار میاد و می‌تونی از هر دوتاشون توی یه پروژه استفاده کنی.

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

CSS Grid برای هر جایی که چیدمان چندستونه یا چندردیفه داری، گزینه خیلی خوبیه. مثلاً:

• صفحه اصلی سایت
• داشبورد مدیریتی
• گالری عکس
• لیست محصولات فروشگاهی
• چیدمان کارت‌های مقاله
• ساختار کلی اپلیکیشن‌های تحت وب
• layoutهای ترکیبی با هدر، سایدبار، محتوا و فوتر

اشتباهات رایج موقع کار با CSS Grid

• استفاده از Grid برای چیزایی که Flexbox بهتر انجامشون می‌ده.
• فراموش کردن gap و استفاده بی‌دلیل از marginهای پیچیده.
• تعریف ستون‌های ثابت زیاد که باعث خراب شدن ظاهر توی موبایل می‌شه.
• استفاده نکردن از minmax برای طراحی ریسپانسیو.
• قاتی کردن بیش از حد grid-column و grid-row بدون برنامه مشخص.

CSS Grid الان دیگه واقعا برای ساختن چیدمان‌های مدرن و ریسپانسیوه جزو واجباته و واقعا نمیشه بعضی پروژه ها رو بدون گرید کار کرد یاد گرفتن Grid واقعاً ارزشش رو داره. با چندتا خاصیت اصلی مثل grid-template-columns، gap، repeat، minmax و grid-template-areas می‌تونی کلی layout جذاب بسازی، بدون اینکه درگیر کدهای پیچیده و شلوغ بشی یا ترفند های عجیب غریب رو فلکس باکس بزنی (کاری که من تا مدتها میکردم 😂)

اینو که خوندید حتما بعدش پست تفاووت های گرید و فلکس باکس هم ببینید اونجا توضیح دادم که بهتره از هر کدوم کجا استفاده شه .