Grid: چیدمان دوبعدی

برای چیدمان دوبعدی (ردیف و ستون)، Grid بهترین است.

پایه

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

fr = سهمی از فضا. 1fr 2fr → ستون دوم دوبرابر.

ری‌سپانسیو بدون Media Query

.gallery {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

«هر ستون حداقل ۲۲۰px، هرچند‌تا جا شد» — روی موبایل یک ستون، دسکتاپ چند ستون، خودکار!

جایگذاری و چیدمان صفحه

.hero { grid-column: 1 / 3; }  /* دو ستون عرض */

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

چیدمان ۱۲ ستونی (مثل فریم‌ورک‌ها)

.row { display: grid; grid-template-columns: repeat(12, 1fr); }
.col-6 { grid-column: span 6; }   /* نصف */

در پلی‌گراند، گالری auto-fit را روی اندازه‌های مختلف ببین.