گرید CSS یه سیستم چیدمان دوبعدیه که با display: grid شروع می‌شه و بهت اجازه می‌ده ردیف‌ها و ستون‌ها رو با grid-template-columns و grid-template-rows تنظیم کنی. تو یه مثال، یه صفحه با هدر، سایدبار، محتوا و فوتر ساختیم که تو موبایل عمودی می‌شه. گرید چیدمان پیچیده رو ساده و ریسپانسیو می‌کنه؛ دست به کد بزن و با این ابزار، سایتت رو حرفه‌ای بچین!

اگه فلکس‌باکس رو یاد گرفتی و حالا دنبال یه ابزار قوی‌تر برای چیدمان دوبعدی هستی، گرید (Grid) همون چیزیه که لازم داری! با گرید می‌تونی سایتت رو مثل یه جدول مرتب کنی و هم افقی و هم عمودی همه‌چیز رو کنترل کنی. تو این مقاله قراره گرید رو از صفر بشناسی، ویژگی‌هاش رو یاد بگیری و با مثال دست به کد بزنی تا چیدمان حرفه‌ای بسازی. آماده‌ای؟ بریم سراغش!

گرید CSS چیه؟

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

این ابزار از سال ۲۰۱۷ تو مرورگرها پشتیبانی شد و الان یکی از محبوب‌ترین روش‌ها برای چیدمان حرفه‌ایه.

چرا گرید یاد بگیری؟

  • کنترل کامل: هم ردیف و هم ستون رو مدیریت می‌کنی.
  • انعطاف: چیدمان‌های پیچیده رو ساده می‌کنه.
  • ریسپانسیو: با چند تغییر، برای هر دستگاهی آماده می‌شه.
  • حرفه‌ای: طراحای وب مدرن ازش استفاده می‌کنن.

شروع با گرید

برای استفاده از گرید، اول یه کانتینر رو "گرید" می‌کنی با display: grid. بعد ردیف‌ها و ستون‌ها رو تعریف می‌کنی.

یه مثال ساده

بیایم یه گرید با سه ستون بسازیم.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>تست گرید</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="item">۱</div>
        <div class="item">۲</div>
        <div class="item">۳</div>
        <div class="item">۴</div>
    </div>
</body>
</html>
CSS (فایل styles.css):
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* سه ستون مساوی */
    gap: 10px; /* فاصله بین آیتم‌ها */
}

.item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

فایل رو تو مرورگر باز کن. می‌بینی چهار جعبه تو سه ستون چیده شدن و چون آیتم چهارم جا نشد، به ردیف بعدی رفته. 1fr یعنی هر ستون یه بخش از فضای موجود رو می‌گیره.

مفاهیم اصلی گرید

گرید دو بخش داره: کانتینر (والد) و آیتم‌ها (فرزندان). بیایم ویژگی‌های مهمش رو ببینیم.

ویژگی‌های کانتینر
  1. display: grid: کانتینر رو گرید می‌کنه.
  2. grid-template-columns: ستون‌ها رو تعریف می‌کنه:
    • 100px 200px: دو ستون با عرض ثابت.
    • 1fr 2fr: ستون اول یه بخش، دومی دو بخش.
grid-template-columns: 100px 1fr 200px;
3-grid-template-rows: ردیف‌ها رو تعریف می‌کنه:
 
grid-template-rows: 50px 100px;
  1.  
  2.  
  3. gap: فاصله بین ردیف‌ها و ستون‌ها:
    • gap: 10px; (همه‌جا).
    • row-gap: 20px; column-gap: 10px; (جدا).
  4. justify-items و align-items: آیتم‌ها رو تو سلول‌هاشون تنظیم می‌کنه:
justify-items: center;
align-items: center;
ویژگی‌های آیتم‌ها
  1. grid-column: آیتم رو تو چند ستون بکش:
grid-column: 1 / 3; /* از ستون 1 تا 3 */
2- grid-row: آیتم رو تو چند ردیف بکش:
grid-row: 1 / 2;

یه پروژه عملی: چیدمان صفحه

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

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>چیدمان گرید</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <header class="header">هدر</header>
        <aside class="sidebar">سایدبار</aside>
        <main class="main">محتوا</main>
        <footer class="footer">فوتر</footer>
    </div>
</body>
</html>
CSS:
.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr; /* سایدبار 1، محتوا 3 */
    grid-template-rows: auto 1fr auto; /* هدر، محتوا، فوتر */
    gap: 10px;
    height: 100vh; /* کل صفحه */
}

.header {
    grid-column: 1 / 3; /* کل عرض */
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

.sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: #ecf0f1;
    padding: 20px;
}

.main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: #bdc3c7;
    padding: 20px;
}

.footer {
    grid-column: 1 / 3;
    background-color: #34495e;
    color: white;
    padding: 20px;
    text-align: center;
}

این چیدمان هدر و فوتر رو تمام‌عرض می‌کنه و سایدبار و محتوا رو کنار هم می‌ذاره. تو مرورگر تستش کن!

ریسپانسیو کردن گرید

بیایم همین چیدمان رو برای موبایل عوض کنیم:

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /* یه ستون */
        grid-template-rows: auto auto auto auto; /* همه عمودی */
    }
    .header, .sidebar, .main, .footer {
        grid-column: 1 / 2; /* همه تو یه ستون */
    }
    .sidebar {
        grid-row: 2 / 3;
    }
    .main {
        grid-row: 3 / 4;
    }
    .footer {
        grid-row: 4 / 5;
    }
}

تو موبایل (زیر ۶۰۰ پیکسل)، همه‌چیز عمودی می‌شه.

ترفندهای گرید

  1. اسم خطوط: به خطوط اسم بده:
grid-template-columns: [start] 1fr [middle] 1fr [end];
.item { grid-column: start / middle; }
2- تکرار: با repeat ستون‌ها رو سریع بساز:
grid-template-columns: repeat(3, 1fr); /* سه ستون مساوی */
3-فاصله خودکار: با auto-fit یا auto-fill ریسپانسیو کن:

 

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

مشکلات رایج و راه‌حل‌ها

  • آیتم‌ها نمی‌چینن: چک کن display: grid رو کانتینر باشه.
  • فضا پر نمی‌شه: fr یا height: 100% رو تست کن.
  • ردیف‌ها گم شدن: تعداد ردیف‌ها رو با grid-template-rows مشخص کن.

قدم بعدی چیه؟

حالا که گرید رو یاد گرفتی:

  • با فلکس‌باکس ترکیبش کن.
  • انیمیشن بهش اضافه کن.
  • تو پروژه‌های واقعی تستش کن.

حرف آخر

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