چیدمان ۱۲ ستونه با گرید

ساخت سیستم گرید ۱۲ ستونه شبیه Bootstrap با CSS Grid خالص

سیستم ۱۲ ستونه

سیستم ۱۲ ستونه استانداردی است که فریم‌ورک‌هایی مثل Bootstrap از آن استفاده می‌کنند. با CSS Grid می‌توان آن را به‌سادگی ساخت.

چرا ۱۲ ستون؟

عدد ۱۲ قابل تقسیم به ۲، ۳، ۴ و ۶ است — این انعطاف‌پذیری بالایی برای چیدمان می‌دهد.

ساخت سیستم ۱۲ ستونه

.grid-12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
    }
    
    /* ستون‌ها */
    .col-12 { grid-column: span 12; }  /* کل عرض */
    .col-6  { grid-column: span 6; }   /* نصف */
    .col-4  { grid-column: span 4; }   /* یک‌سوم */
    .col-3  { grid-column: span 3; }   /* یک‌چهارم */
    .col-8  { grid-column: span 8; }   /* دو‌سوم */

ریسپانسیو کردن

/* موبایل — همه تمام‌عرض */
    .col-6, .col-4, .col-3 {
        grid-column: span 12;
    }
    
    /* تبلت */
    @media (min-width: 768px) {
        .col-md-6 { grid-column: span 6; }
        .col-md-4 { grid-column: span 4; }
    }
    
    /* دسکتاپ */
    @media (min-width: 1024px) {
        .col-lg-3 { grid-column: span 3; }
        .col-lg-8 { grid-column: span 8; }
    }

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

نکات مهم

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

ابزارهای مرتبط