چیدمان وب‌سایت

ساخت چیدمان کامل وب‌سایت: هدر، فوتر، سایدبار، محتوا و واکنش‌گرا

چیدمان وب‌سایت

چیدمان (Layout) ساختار کلی وب‌سایت را تعیین می‌کند — هدر، ناوبری، محتوا، سایدبار و فوتر.

ساختار استاندارد وب‌سایت

┌─────────────────────────────┐
    │          Header             │
    ├─────────────────────────────┤
    │         Navigation          │
    ├──────────┬──────────────────┤
    │          │                  │
    │ Sidebar  │    Content       │
    │          │                  │
    ├──────────┴──────────────────┤
    │           Footer            │
    └─────────────────────────────┘

۱. چیدمان با CSS Grid

.layout {
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar content"
            "footer footer";
        grid-template-columns: 250px 1fr;
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
    }
    
    .header  { grid-area: header; }
    .sidebar { grid-area: sidebar; }
    .content { grid-area: content; }
    .footer  { grid-area: footer; }

۲. چیدمان با Flexbox

.layout {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    .main-section {
        display: flex;
        flex: 1;
    }
    
    .sidebar { width: 250px; }
    .content { flex: 1; }

۳. ریسپانسیو کردن چیدمان

/* موبایل — ستونی */
    @media (max-width: 768px) {
        .layout {
            grid-template-areas:
                "header"
                "content"
                "footer";
            grid-template-columns: 1fr;
        }
        .sidebar { display: none; }
    }

هدر چسبان

header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #2c3e50;
    }

فوتر در پایین صفحه

body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    .content {
        flex: 1;  /* محتوا فضا را پر می‌کند */
    }

انواع چیدمان

نوعتوضیح
تک‌ستونهموبایل و صفحات ساده
دو ستونهسایدبار + محتوا
سه ستونهدو سایدبار + محتوا
مجله‌ایچیدمان پیچیده
Hero + Contentصفحه فرود

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

نکات مهم

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

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