Flexbox یا Grid؟ راهنمای انتخاب برای چیدمان CSS

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

تفاوت بنیادی

• Flexbox برای چیدمان یک‌بعدی است: یا یک ردیف، یا یک ستون.
• Grid برای چیدمان دوبعدی است: ردیف و ستون به‌صورت هم‌زمان.

Flexbox در عمل

برای کنار هم چیدن عناصر در یک راستا عالی است — مثل نوار ناوبری یا یک ردیف دکمه:

.navbar {
    display: flex;
    justify-content: space-between;  /* توزیع افقی */
    align-items: center;             /* هم‌ترازی عمودی */
    gap: 16px;
}

خواص کلیدی Flexbox:

• flex-direction — راستای اصلی (row یا column)
• justify-content — چینش در راستای اصلی
• align-items — چینش در راستای عمود
• flex-wrap — شکستن به خط بعد

Grid در عمل

برای چیدمان کامل صفحه یا شبکه‌ها (مثل گالری تصاویر یا کارت‌ها) بهترین است:

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

واحد 1fr یعنی «یک سهم از فضای موجود». می‌توانی چیدمان‌های پیچیده بسازی:

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;   /* سایدبار + محتوا */
}

پس کِی کدام؟

نکتهٔ مهم: با هم استفاده کن

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

ری‌سپانسیو فراموش نشود

هر دو با Media Query ترکیب می‌شوند تا روی موبایل و دسکتاپ درست دیده شوند:

@media (min-width: 768px) {
    .gallery { grid-template-columns: repeat(3, 1fr); }
}

جمع‌بندی

قانون ساده را به خاطر بسپار: یک‌بعدی → Flexbox، دوبعدی → Grid. با کمی تمرین، انتخاب بین این دو به‌صورت غریزی انجام می‌شود.

برای یادگیری کامل CSS با تمرین، مسیر CSS آرنا را ببین.