معرفی گرید (Grid)

CSS Grid چیست؟

CSS Grid سیستم چیدمان دوبعدی CSS است که همزمان ستون و سطر را کنترل می‌کند.

گرید در برابر فلکس‌باکس

ویژگی	Flexbox	Grid
بعد	یک‌بعدی	دوبعدی ⭐
محتوا-محور	✅	❌
چیدمان-محور	❌	~✅
کل صفحه	❌	✅
کامپوننت	✅	❌

گرید پایه

.grid {
        display: grid;
        grid-template-columns: 200px 1fr 200px;
        gap: 20px;
    }

واحدهای گرید

واحد	توضیح
fr	بخش کسری (fraction) — نسبت ⭐
px	پیکسل ثابت
%	درصد
auto	خودکار
min-content	کوچک‌ترین محتوا
max-content	بزرگ‌ترین محتوا

repeat()

.grid {
        grid-template-columns: repeat(3, 1fr);  /* ۳ ستون مساوی */
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

gap

.grid {
        gap: 20px;           /* بین همه */
        column-gap: 20px;    /* بین ستون‌ها */
        row-gap: 20px;       /* بین سطرها */
    }

بهترین شیوه‌ها

• گرید برای چیدمان کل صفحه و چیدمان دوبعدی
• فلکس‌باکس برای چیدمان کامپوننت‌های کوچک
• repeat(auto-fill, minmax(250px, 1fr)) گالری کاملاً ریسپانسیو
• از fr برای ستون‌های نسبی استفاده کنید

نکات مهم

• گرید هم ستون و هم سطر را کنترل می‌کند
• fr فاصله‌بندی نسبی ایجاد می‌کند
• repeat() کار را ساده‌تر می‌کند
• minmax(min, max) برای ریسپانسیو