Grid و چیدمان عناصر در Tailwind CSS

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

Grid چیست؟

CSS Grid یک سیستم Layout دوبعدی در CSS است که به ما اجازه می‌دهد عناصر را بر اساس ردیف‌ها و ستون‌ها مرتب کنیم.

برای مثال، تصور کنید می‌خواهیم شش کارت داشته باشیم:

+----------+----------+----------+
|  Card 1  |  Card 2  |  Card 3  |
+----------+----------+----------+
|  Card 4  |  Card 5  |  Card 6  |
+----------+----------+----------+

در CSS معمولی می‌توان چنین Layoutهایی را با CSS Grid ایجاد کرد.

در Tailwind CSS کافی است Container را با:

grid

به Grid Container تبدیل کنیم.

فعال کردن Grid

مثال ساده:

<div class="grid">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

کلاس:

grid

باعث می‌شود عنصر والد به یک Grid Container تبدیل شود.

اما برای اینکه مشخص کنیم چند ستون داشته باشیم، باید از Utilityهای مربوط به ستون‌ها استفاده کنیم.

ساخت ستون‌ها با grid-cols

یکی از مهم‌ترین Utilityهای Grid در Tailwind:

grid-cols-*

است.

برای مثال:

grid-cols-2

یعنی دو ستون ایجاد کن.

مثال:

<div class="grid grid-cols-2">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

ساختار کلی:

+----------+----------+
|  Item 1  |  Item 2  |
+----------+----------+
|  Item 3  |  Item 4  |
+----------+----------+

ساخت سه ستون

برای سه ستون:

grid-cols-3

استفاده می‌کنیم.

<div class="grid grid-cols-3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>

نتیجه:

+----------+----------+----------+
|  Item 1  |  Item 2  |  Item 3  |
+----------+----------+----------+
|  Item 4  |  Item 5  |  Item 6  |
+----------+----------+----------+

ساخت چهار ستون

اگر به چهار ستون نیاز داشته باشیم:

<div class="grid grid-cols-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
</div>

ساختار به شکل زیر خواهد بود:

+--------+--------+--------+--------+
| Item 1 | Item 2 | Item 3 | Item 4 |
+--------+--------+--------+--------+
| Item 5 | Item 6 | Item 7 | Item 8 |
+--------+--------+--------+--------+

ایجاد فاصله بین Grid Itemها

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

برای این کار از gap-* استفاده می‌کنیم.

مثال:

<div class="grid grid-cols-3 gap-6">
    <div class="rounded-lg border p-5">Card 1</div>
    <div class="rounded-lg border p-5">Card 2</div>
    <div class="rounded-lg border p-5">Card 3</div>
    <div class="rounded-lg border p-5">Card 4</div>
    <div class="rounded-lg border p-5">Card 5</div>
    <div class="rounded-lg border p-5">Card 6</div>
</div>

کلاس:

gap-6

فاصله بین ردیف‌ها و ستون‌ها را کنترل می‌کند.

تفاوت gap با فاصله‌های قبلی

در مقاله‌های قبلی با Margin و Padding آشنا شدیم.

برای مثال:

<div class="p-4">

برای ایجاد فضای داخلی عنصر است.

اما:

<div class="gap-4">

در یک Grid یا Flex Container برای ایجاد فاصله بین آیتم‌ها استفاده می‌شود.

به صورت ساده:

Padding
+----------------------+
|   Content            |
|                      |
+----------------------+

Gap

+---------+    +---------+
| Item 1  |    | Item 2  |
+---------+    +---------+

بنابراین این دو Utility کاربرد متفاوتی دارند.

تفاوت row و column gap

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

برای فاصله افقی بین ستون‌ها می‌توانیم از:

gap-x-*

استفاده کنیم.

برای فاصله عمودی بین ردیف‌ها:

gap-y-*

استفاده می‌کنیم.

مثال:

<div class="grid grid-cols-3 gap-x-8 gap-y-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>

در این مثال:

gap-x-8

فاصله بین ستون‌ها را تنظیم می‌کند.

و:

gap-y-4

فاصله بین ردیف‌ها را تنظیم می‌کند.

ساخت کارت‌های محصول با Grid

یکی از رایج‌ترین کاربردهای Grid، ساخت صفحه محصولات است.

مثال:

<section class="mx-auto max-w-6xl p-6">

    <h1 class="mb-8 text-3xl font-bold">
        محصولات
    </h1>

    <div class="grid grid-cols-3 gap-6">

        <div class="rounded-xl border bg-white p-5 shadow">
            <h2 class="text-xl font-bold">
                Laptop
            </h2>

            <p class="mt-2 text-gray-600">
                Professional laptop.
            </p>

            <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white">
                خرید
            </button>
        </div>

        <div class="rounded-xl border bg-white p-5 shadow">
            <h2 class="text-xl font-bold">
                Smartphone
            </h2>

            <p class="mt-2 text-gray-600">
                Modern smartphone.
            </p>

            <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white">
                خرید
            </button>
        </div>

        <div class="rounded-xl border bg-white p-5 shadow">
            <h2 class="text-xl font-bold">
                Headphones
            </h2>

            <p class="mt-2 text-gray-600">
                Wireless headphones.
            </p>

            <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white">
                خرید
            </button>
        </div>

    </div>

</section>

ساختار کلی:

+----------------+----------------+----------------+
|    Laptop      |   Smartphone   |   Headphones   |
+----------------+----------------+----------------+

Grid و Flexbox چه تفاوتی دارند؟

هر دو ابزار برای ساخت Layout استفاده می‌شوند، اما کاربرد آن‌ها دقیقاً یکسان نیست.

Flexbox

Flexbox بیشتر برای چیدمان یک‌بعدی مناسب است.

یعنی معمولاً روی یک محور کار می‌کنیم:

Item 1 → Item 2 → Item 3

یا:

Item 1
   ↓
Item 2
   ↓
Item 3

Grid

Grid برای چیدمان دوبعدی بسیار مناسب است:

Item 1 | Item 2 | Item 3
Item 4 | Item 5 | Item 6
Item 7 | Item 8 | Item 9

به صورت ساده:

Flexbox = یک محور

Grid = ردیف + ستون

این قانون همیشه به معنی «فقط Flexbox یا فقط Grid» نیست؛ در پروژه‌های واقعی می‌توان هر دو را در کنار یکدیگر استفاده کرد.

تعیین تعداد ردیف‌ها

در کنار ستون‌ها، Tailwind امکان کنترل تعداد ردیف‌ها را نیز فراهم می‌کند.

برای مثال:

grid-rows-2

دو ردیف ایجاد می‌کند.

مثال:

<div class="grid grid-rows-2 grid-cols-3 gap-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

ساختار کلی:

+-----+-----+-----+
|  1  |  2  |  3  |
+-----+-----+-----+
|  4  |  5  |  6  |
+-----+-----+-----+

ترکیب Grid با Utilityهای قبلی

قدرت اصلی Tailwind زمانی مشخص می‌شود که Utilityهای مختلف را با هم ترکیب کنیم.

مثلاً:

<div class="grid grid-cols-3 gap-6">

    <div class="rounded-xl border bg-white p-6 shadow">
        <h2 class="text-xl font-bold">
            Product
        </h2>

        <p class="mt-2 text-gray-600">
            Product description.
        </p>
    </div>

</div>

در این مثال:

grid

سیستم Grid را فعال می‌کند.

grid-cols-3

سه ستون ایجاد می‌کند.

gap-6

فاصله بین آیتم‌ها را تنظیم می‌کند.

rounded-xl

گوشه‌های کارت را گرد می‌کند.

border

حاشیه ایجاد می‌کند.

p-6

فضای داخلی کارت را تنظیم می‌کند.

shadow

سایه ایجاد می‌کند.

Span چیست؟

گاهی نمی‌خواهیم تمام آیتم‌ها دقیقاً یک اندازه داشته باشند.

برای مثال ممکن است بخواهیم یک آیتم دو ستون را اشغال کند.

برای این کار می‌توان از:

col-span-2

استفاده کرد.

مثال:

<div class="grid grid-cols-3 gap-4">

    <div class="col-span-2 rounded-lg bg-blue-500 p-6 text-white">
        Main Content
    </div>

    <div class="rounded-lg bg-gray-300 p-6">
        Sidebar
    </div>

</div>

در این حالت:

+------------------------+----------+
|      Main Content      | Sidebar  |
|      2 Columns         | 1 Column |
+------------------------+----------+

کلاس:

col-span-2

یعنی این Grid Item دو ستون را اشغال کند.

col-span-3

اگر Grid سه ستون داشته باشد و بخواهیم یک عنصر تمام سه ستون را بگیرد:

col-span-3

استفاده می‌کنیم.

<div class="grid grid-cols-3 gap-4">

    <div class="col-span-3 rounded-lg bg-gray-900 p-6 text-white">
        Full Width Content
    </div>

    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>

</div>

در این حالت:

+-----------------------------------+
|        Full Width Content         |
+---------------+-------+-----------+
|    Item 1     | Item 2|  Item 3   |
+---------------+-------+-----------+

ساخت Layout ساده Dashboard

Grid برای ساخت Dashboard نیز بسیار مناسب است.

فرض کنید چهار کارت آماری داریم:

<div class="grid grid-cols-4 gap-6">

    <div class="rounded-xl border p-6">
        <h2 class="text-sm text-gray-500">
            Users
        </h2>

        <p class="mt-2 text-3xl font-bold">
            1,250
        </p>
    </div>

    <div class="rounded-xl border p-6">
        <h2 class="text-sm text-gray-500">
            Orders
        </h2>

        <p class="mt-2 text-3xl font-bold">
            840
        </p>
    </div>

    <div class="rounded-xl border p-6">
        <h2 class="text-sm text-gray-500">
            Products
        </h2>

        <p class="mt-2 text-3xl font-bold">
            320
        </p>
    </div>

    <div class="rounded-xl border p-6">
        <h2 class="text-sm text-gray-500">
            Revenue
        </h2>

        <p class="mt-2 text-3xl font-bold">
            $12K
        </p>
    </div>

</div>

نتیجه مفهومی:

+------------+------------+------------+------------+
|   Users    |   Orders   |  Products  |  Revenue   |
+------------+------------+------------+------------+

این نوع Layout در پنل‌های مدیریت بسیار رایج است.

ترکیب Grid و Flexbox

لازم نیست یک صفحه را فقط با Grid یا فقط با Flexbox بسازیم.

برای مثال می‌توانیم Layout اصلی را با Grid ایجاد کنیم و داخل هر کارت از Flexbox استفاده کنیم.

<div class="grid grid-cols-3 gap-6">

    <div class="flex items-center justify-between rounded-xl border p-5">

        <div>
            <h2 class="font-bold">
                Users
            </h2>

            <p class="text-gray-500">
                Total users
            </p>
        </div>

        <span class="text-2xl font-bold">
            1250
        </span>

    </div>

</div>

در این مثال:

Grid
│
├── Card
│   └── Flex
│
├── Card
│   └── Flex
│
└── Card
    └── Flex

این ترکیب در پروژه‌های واقعی بسیار کاربردی است.

Grid برای گالری تصاویر

یکی دیگر از کاربردهای رایج Grid، ساخت گالری تصاویر است.

<div class="grid grid-cols-3 gap-4">

    <img
        src="image-1.jpg"
        alt="Image 1"
        class="h-64 w-full rounded-lg object-cover"
    >

    <img
        src="image-2.jpg"
        alt="Image 2"
        class="h-64 w-full rounded-lg object-cover"
    >

    <img
        src="image-3.jpg"
        alt="Image 3"
        class="h-64 w-full rounded-lg object-cover"
    >

    <img
        src="image-4.jpg"
        alt="Image 4"
        class="h-64 w-full rounded-lg object-cover"
    >

    <img
        src="image-5.jpg"
        alt="Image 5"
        class="h-64 w-full rounded-lg object-cover"
    >

    <img
        src="image-6.jpg"
        alt="Image 6"
        class="h-64 w-full rounded-lg object-cover"
    >

</div>

ساختار:

+-----------+-----------+-----------+
|  Image 1  |  Image 2  |  Image 3  |
+-----------+-----------+-----------+
|  Image 4  |  Image 5  |  Image 6  |
+-----------+-----------+-----------+

اشتباهات رایج در استفاده از Grid

اشتباه اول: فراموش کردن grid

اگر بنویسیم:

<div class="grid-cols-3">

اما grid را اضافه نکنیم، ساختار مورد انتظار Grid ایجاد نمی‌شود.

بهتر است بنویسیم:

<div class="grid grid-cols-3">

اشتباه دوم: استفاده بیش از حد از ستون‌ها

اگر برای یک بخش ساده از تعداد زیادی ستون استفاده کنیم، ممکن است Layout پیچیده و نامناسب شود.

برای شروع معمولاً Layoutهای ساده مانند:

grid-cols-2

یا:

grid-cols-3

برای تمرین بسیار مناسب هستند.

اشتباه سوم: فراموش کردن gap

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

مثلاً:

<div class="grid grid-cols-3">

در بسیاری از موارد بهتر است به شکل زیر نوشته شود:

<div class="grid grid-cols-3 gap-6">

تمرین عملی

یک بخش فروشگاهی با Tailwind CSS ایجاد کنید.

این بخش باید شامل موارد زیر باشد:

• یک عنوان با نام Products

• حداقل ۶ کارت محصول

• استفاده از grid

• استفاده از grid-cols-3

• استفاده از gap-6

• هر کارت دارای عنوان محصول باشد

• هر کارت دارای توضیح کوتاه باشد

• هر کارت دارای قیمت باشد

• هر کارت دارای دکمه باشد

• برای کارت‌ها از border، rounded و shadow استفاده کنید

سپس یک بخش جداگانه برای Dashboard ایجاد کنید و چهار کارت آماری داشته باشید.

جمع‌بندی

در این مقاله با CSS Grid در Tailwind CSS آشنا شدیم.

مهم‌ترین Utilityهایی که یاد گرفتیم عبارت‌اند از:

• grid → فعال کردن Grid

• grid-cols-2 → ساخت دو ستون

• grid-cols-3 → ساخت سه ستون

• grid-cols-4 → ساخت چهار ستون

• grid-rows-* → مشخص کردن تعداد ردیف‌ها

• gap-* → ایجاد فاصله بین آیتم‌ها

• gap-x-* → تنظیم فاصله افقی

• gap-y-* → تنظیم فاصله عمودی

• col-span-2 → اشغال دو ستون

• col-span-3 → اشغال سه ستون

همچنین یاد گرفتیم که Flexbox و Grid رقیب یکدیگر نیستند و می‌توانیم از هر دو در یک پروژه استفاده کنیم. Grid برای Layoutهای دوبعدی و شبکه‌ای بسیار مناسب است و Flexbox نیز برای چیدمان یک‌بعدی عناصر کاربرد زیادی دارد.