در طراحی وب، Layout (چیدمان صفحه) ساختاری است که عناصر مختلف مانند هدر (Header)، محتوا (Content)، سایدبار (Sidebar)، فوتر (Footer) و سایر بخش‌ها را سازمان‌دهی می‌کند.

ایجاد یک Layout استاندارد با CSS، یکی از مهارت‌های کلیدی برای طراحی صفحات وب است.

در این مقاله، با استفاده از Flexbox و CSS Grid، نحوه پیاده‌سازی یک Layout ساده و واکنش‌گرا را بررسی می‌کنیم.

۱. ساختار کلی یک Layout در HTML

قبل از پیاده‌سازی Layout در CSS، ابتدا باید ساختار HTML را تعریف کنیم. در این مثال، یک هدر، منوی ناوبری، بخش محتوا، سایدبار و فوتر خواهیم داشت.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout ساده با CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>هدر سایت</header>
    <nav>منوی ناوبری</nav>
    <main>
        <aside class="sidebar">سایدبار</aside>
        <section class="content">محتوای اصلی</section>
    </main>
    <footer>فوتر سایت</footer>
</body>
</html>

✅ این ساختار شامل ۵ بخش اصلی است:

header → نمایش عنوان یا لوگوی سایت
nav → منوی ناوبری
main → بخش اصلی صفحه که شامل محتوا و سایدبار است
aside → سایدبار (مثلاً لیست مقالات یا تبلیغات)
footer → فوتر سایت

۲. استایل‌دهی Layout با CSS (استفاده از Flexbox)

حالا که ساختار HTML مشخص شد، استایل کلی آن را با Flexbox در CSS تنظیم می‌کنیم.

/* تنظیمات عمومی صفحه */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* استایل هدر و فوتر */
header, footer {
    background-color: #007BFF;
    color: white;
    text-align: center;
    padding: 15px;
}

/* استایل منوی ناوبری */
nav {
    background-color: #343A40;
    color: white;
    text-align: center;
    padding: 10px;
}

/* تنظیم ساختار اصلی */
main {
    display: flex;
    flex: 1;
    padding: 10px;
}

/* سایدبار */
.sidebar {
    width: 25%;
    background-color: #f8f9fa;
    padding: 15px;
}

/* محتوای اصلی */
.content {
    width: 75%;
    background-color: #ffffff;
    padding: 15px;
}

✅ نکات مهم در این طراحی:

از display: flex; در body و main برای ایجاد یک چیدمان انعطاف‌پذیر استفاده کردیم.
flex: 1; در main باعث می‌شود که بخش اصلی صفحه، کل فضای باقیمانده را بگیرد.
سایدبار (.sidebar) ۲۵٪ و محتوای اصلی (.content) ۷۵٪ از عرض صفحه را می‌گیرند.
از رنگ‌ها و پدینگ‌ها برای زیباتر شدن چیدمان استفاده شده است.

۳. پیاده‌سازی Layout با CSS Grid (روش جایگزین)

CSS Grid روشی مدرن‌تر و قدرتمندتر برای طراحی Layout است. می‌توان از Grid برای طراحی ساختار مشابه به روش Flexbox استفاده کرد:

body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr;
    height: 100vh;
}

/* تنظیم بخش‌های مختلف صفحه */
header, footer, nav {
    text-align: center;
    padding: 15px;
}

header {
    background-color: #007BFF;
    color: white;
}

nav {
    background-color: #343A40;
    color: white;
}

footer {
    background-color: #007BFF;
    color: white;
}

/* تنظیم چیدمان اصلی */
main {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 10px;
    padding: 10px;
}

.sidebar {
    background-color: #f8f9fa;
    padding: 15px;
}

.content {
    background-color: #ffffff;
    padding: 15px;
}

✅ چرا CSS Grid؟

انعطاف‌پذیری بیشتر در چیدمان‌های پیچیده
امکان استفاده از grid-template-rows و grid-template-columns برای تنظیم اندازه ردیف‌ها و ستون‌ها
gap: 10px; برای فاصله‌ی بین المان‌ها بدون نیاز به margin

۴. واکنش‌گرایی (Responsive) با Media Queries

برای اینکه Layout در صفحه‌های کوچک مانند موبایل به‌درستی نمایش داده شود، از Media Queries استفاده می‌کنیم:

@media (max-width: 768px) {
    main {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        order: 2;
    }

    .content {
        width: 100%;
        order: 1;
    }
}

✅ توضیح:

در صفحه‌های کوچک‌تر از ۷۶۸px، main به ستون عمودی تبدیل می‌شود.
سایدبار زیر محتوای اصلی قرار می‌گیرد تا تجربه‌ی کاربری بهتری داشته باشد.

۵. مقایسه Flexbox و CSS Grid برای پیاده‌سازی Layout

ویژگی	Flexbox	CSS Grid
نوع چیدمان	مناسب برای چینش افقی یا عمودی	مناسب برای چینش چندبُعدی
کنترل بهتر	روی ترتیب آیتم‌ها	روی اندازه و جایگاه دقیق
سهولت استفاده	ساده‌تر برای چیدمان‌های خطی	بهتر برای چیدمان‌های پیچیده‌تر
پشتیبانی مرورگرها	در تمامی مرورگرها پشتیبانی می‌شود	نیاز به مرورگرهای مدرن دارد

✅ اگر چیدمان ساده و خطی است، از Flexbox استفاده کنید.
✅ اگر نیاز به چیدمان پیچیده‌تر دارید، CSS Grid گزینه بهتری است.

۶. نتیجه‌گیری

طراحی یک Layout استاندارد شامل بخش‌های اصلی هدر، منو، محتوا، سایدبار و فوتر است.
از Flexbox برای چیدمان‌های ساده و افقی/عمودی استفاده کنید.
از CSS Grid برای چیدمان‌های چندبُعدی و پیچیده‌تر استفاده کنید.
با استفاده از Media Queries، چیدمان را ریسپانسیو کنید تا در دستگاه‌های مختلف نمایش درستی داشته باشد.

🔹 انتخاب روش مناسب بستگی به نیازهای پروژه شما دارد، اما یادگیری هردو تکنیک، مهارت شما را در طراحی وب تقویت می‌کند! 🚀