📊 درس پنجم: چیدمان با Grid

🎯 هدف این درس: آشنایی با Grid و نحوه چیدمان پیشرفته عناصر در دو بعد

سلام دوست عزیز! 👋

توی درس قبل با Flexbox آشنا شدی و یاد گرفتی چطور عناصر رو در یک بعد (افقی یا عمودی) بچینی. اما گاهی نیاز به چیدمان در هر دو بعد (سطر و ستون) داریم. اینجاست که Grid به کمک ما می‌آید.

توی این درس، با هم یاد می‌گیریم:

✅ مفهوم Grid و تفاوت آن با Flexbox
✅ تعریف ستون‌ها و ردیف‌ها
✅ فاصله‌ها و موقعیت‌دهی
✅ تمرین: طراحی یک گالری

📐 بخش ۱: Grid چیست؟

Grid یک سیستم چیدمان دو بعدی است که به ما امکان می‌دهد عناصر را در سطرها و ستون‌ها به‌صورت منظم بچینیم.

💡 تفاوت Grid و Flexbox:

Flexbox: برای چیدمان در یک بعد (ردیف یا ستون)
Grid: برای چیدمان در دو بعد (سطر و ستون هم‌زمان)

ساختار کلی Grid:

🎨
Grid

CSS
v3


<style>
    .container {
        display: grid;  /* تبدیل به گرید */
        grid-template-columns: repeat(3, 1fr);  /* ۳ ستون مساوی */
        gap: 20px;  /* فاصله بین آیتم‌ها */
    }

    .item {
        background: #2563EB;
        color: white;
        padding: 30px;
        border-radius: 8px;
        text-align: center;
    }
</style>

<div class="container">
    <div class="item">۱</div>
    <div class="item">۲</div>
    <div class="item">۳</div>
    <div class="item">۴</div>
    <div class="item">۵</div>
    <div class="item">۶</div>
</div>

📊 بخش ۲: تعریف ستون‌ها و ردیف‌ها

📊 توابع مهم Grid

تابع	کاربرد	مثال
`repeat()`	تکرار یک الگو	`repeat(3, 1fr)`
`fr`	واحد انعطاف‌پذیر	`1fr 2fr 1fr`
`minmax()`	حداقل و حداکثر اندازه	`minmax(200px, 1fr)`
`auto-fill`	پر کردن خودکار	`repeat(auto-fill, 200px)`

مثال: اندازه‌های مختلف ستون‌ها

🎨
اندازه ستون‌ها

CSS
v3


<style>
    .grid-1 {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;  /* ستون وسط ۲ برابر بزرگ‌تر */
        gap: 15px;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);  /* ۳ ستون مساوی */
        gap: 20px;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* واکنش‌گرا */
        gap: 20px;
    }

    .item {
        background: #2563EB;
        color: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
    }
</style>

📍 بخش ۳: موقعیت‌دهی در Grid

با استفاده از ویژگی‌های grid-column و grid-row می‌توانیم هر آیتم را در جای خاصی از Grid قرار دهیم.

🎨
موقعیت‌دهی

CSS
v3


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

    /* آیتمی که دو ستون را اشغال می‌کند */
    .item-1 {
        grid-column: 1 / 3;  /* از ستون ۱ تا ۳ */
        background: #7C3AED;
    }

    /* آیتمی که دو ردیف را اشغال می‌کند */
    .item-4 {
        grid-row: 2 / 4;  /* از ردیف ۲ تا ۴ */
        background: #059669;
    }
</style>

💡 نکته مهم

در Grid، شمارش ستون‌ها و ردیف‌ها از ۱ شروع می‌شود. مقدار 1 / 3 یعنی از ستون ۱ تا ستون ۳ (شامل ستون‌های ۱ و ۲).

📝 بخش ۴: پروژه عملی – طراحی یک گالری

📝 پروژه: گالری تصاویر

یک گالری تصاویر با استفاده از Grid طراحی کنید که شامل ۹ تصویر با چیدمان منظم باشد.

🔍 راه‌حل پروژه:

🎨
گالری

CSS
v3


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>گالری تصاویر</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Vazir", "Arial", sans-serif;
            background: #f8fafc;
            padding: 40px;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
        }

        .gallery-item {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #e2e8f0;
        }

        .gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }

        .gallery-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .gallery-item .caption {
            padding: 15px;
            text-align: center;
            font-weight: 500;
            color: #1e293b;
        }

        /* آیتم بزرگ (۲ ستون) */
        .item-large {
            grid-column: 1 / 3;
        }

        /* آیتم کوچک (۱ ستون) */
        .item-small {
            grid-column: 3 / 4;
        }

        /* واکنش‌گرا */
        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(2, 1fr);
            }

            .item-large,
            .item-small {
                grid-column: auto;
            }
        }

        @media (max-width: 480px) {
            .gallery {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="gallery">
        <div class="gallery-item item-large">
            <img src="https://picsum.photos/400/300?random=1" 
                 alt="تصویر ۱">
            <div class="caption">تصویر ۱</div>
        </div>

        <div class="gallery-item item-small">
            <img src="https://picsum.photos/400/300?random=2" 
                 alt="تصویر ۲">
            <div class="caption">تصویر ۲</div>
        </div>

        <div class="gallery-item">
            <img src="https://picsum.photos/400/300?random=3" 
                 alt="تصویر ۳">
            <div class="caption">تصویر ۳</div>
        </div>

        <div class="gallery-item">
            <img src="https://picsum.photos/400/300?random=4" 
                 alt="تصویر ۴">
            <div class="caption">تصویر ۴</div>
        </div>

        <div class="gallery-item">
            <img src="https://picsum.photos/400/300?random=5" 
                 alt="تصویر ۵">
            <div class="caption">تصویر ۵</div>
        </div>

        <div class="gallery-item">
            <img src="https://picsum.photos/400/300?random=6" 
                 alt="تصویر ۶">
            <div class="caption">تصویر ۶</div>
        </div>

        <div class="gallery-item">
            <img src="https://picsum.photos/400/300?random=7" 
                 alt="تصویر ۷">
            <div class="caption">تصویر ۷</div>
        </div>

        <div class="gallery-item">
            <img src="https://picsum.photos/400/300?random=8" 
                 alt="تصویر ۸">
            <div class="caption">تصویر ۸</div>
        </div>

        <div class="gallery-item">
            <img src="https://picsum.photos/400/300?random=9" 
                 alt="تصویر ۹">
            <div class="caption">تصویر ۹</div>
        </div>
    </div>
</body>
</html>

📝 تمرین‌های عملی

🎯 تمرین شماره ۱

یک صفحه با ۴ ستون و ۳ ردیف با استفاده از Grid طراحی کنید. هر سلول دارای یک رنگ متفاوت باشد.

🎯 تمرین شماره ۲

یک پروفایل Grid با هدر، سایدبار و محتوای اصلی طراحی کنید.

🧩 جمع‌بندی درس

تبریک می‌گم! 🎉 توی این درس یاد گرفتی:

✅ مفهوم Grid و تفاوت آن با Flexbox
✅ تعریف ستون‌ها و ردیف‌ها با grid-template-columns
✅ استفاده از repeat() و fr برای اندازه‌های انعطاف‌پذیر
✅ موقعیت‌دهی آیتم‌ها با grid-column و grid-row
✅ طراحی یک گالری حرفه‌ای با Grid

🎯 برای درس بعدی آماده‌اید؟

در درس بعدی، با طراحی واکنش‌گرا (Responsive) آشنا می‌شیم و یاد می‌گیریم چطور صفحات رو برای همه دستگاه‌ها بهینه کنیم.

🔗 لینک‌های مرتبط

⬅️
درس قبل: Flexbox

🚀
درس بعدی: واکنش‌گرا

🏠
صفحه دوره‌ها

نویسنده تیم رجستری

تاریخ انتشار 20 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

چیدمان با Grid