آموزش CSS | مدیریت طرح بندی (Layout)

معرفی مفهوم طرح بندی در CSS

طرح بندی (Layout) در CSS به چگونگی چیدمان و قرارگیری المان‌های HTML در صفحه وب اشاره دارد. به عبارت ساده‌تر، طرح بندی مشخص می‌کند که هر جعبه (div، پاراگراف، تصویر و …) در کجای صفحه قرار بگیرد و چقدر فضا را اشغال کند.

در مرورگرهای وب، به طور پیش‌فرض هر المان به صورت عمودی و از بالا به پایین در جریان عادی صفحه (Normal Flow) چیده می‌شود. اما CSS به شما اجازه می‌دهد این جریان را تغییر دهید و المان‌ها را به صورت دلخواه در کنار هم، با فاصله‌های مشخص و در ابعاد دلخواه قرار دهید.

چرا طرح بندی مهم است؟

بدون طرح بندی، تمام محتوای شما به صورت یک ستون عمودی و پشت سر هم نمایش داده می‌شود که برای اکثر صفحات وب مدرن (مانند وبلاگ‌ها، فروشگاه‌ها و شبکه‌های اجتماعی) مناسب نیست. طرح بندی به شما امکان می‌دهد:

• ایجاد ساختار چندستونه: مانند داشتن یک ستون برای محتوای اصلی و یک ستون برای نوار کناری.
• کنترل موقعیت دقیق: قرار دادن یک المان در مرکز صفحه یا در گوشه بالا-راست.
• مدیریت فاصله‌ها: ایجاد فضای خالی در اطراف المان‌ها برای زیبایی و خوانایی.
• سازگاری با اندازه صفحه: اطمینان از اینکه صفحه در مرورگرهای مختلف و اندازه‌های مختلف پنجره، ظاهر مناسبی داشته باشد.

ویژگی‌های پایه‌ای در طرح بندی

برای شروع کار با طرح بندی، باید با دو دسته ویژگی کلیدی آشنا شوید:

1. display: این ویژگی تعیین می‌کند که المان چگونه با همسایگان خود رفتار کند. مقدایر پرکاربرد عبارتند از:

   • block: المان تمام عرض موجود را اشغال می‌کند و از خط جدیدی شروع می‌شود.
   • inline: المان فقط به اندازه محتوای خود فضا می‌گیرد و در کنار المان‌های دیگر در یک خط باقی می‌ماند.
   • inline-block: ترکیبی از دو حالت بالا (اندازه بر اساس محتوا، اما قابل تنظیم اعمال ارتفاع و عرض).
   • none: المان را به طور کامل از صفحه حذف می‌کند.
   • flex و grid: که روش‌های پیشرفته‌تری برای طرح بندی هستند (در بخش‌های بعدی توضیح داده می‌شوند).

2. موقعیت‌یابی (Positioning): ویژگی position نحوه قرارگیری المان را کنترل می‌کند:

   • static: حالت پیش‌فرض، المان در جریان عادی صفحه قرار دارد.
   • relative: المان نسبت به موقعیت عادی خود جابجا می‌شود (بدون تأثیر بر المان‌های دیگر).
   • absolute: المان نسبت به نزدیک‌ترین والد دارای موقعیت غیر از static، جابجا می‌شود (از جریان عادی خارج می‌شود).
   • fixed: المان نسبت به پنجره مرورگر جابجا می‌شود و حتی با اسکرول صفحه در جای خود می‌ماند.

مثال ساده از طرح بندی:
فرض کنید یک <div> دارید که می‌خواهید در وسط صفحه قرار گیرد و یک <span> درون آن به رنگ قرمز باشد.

.container {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    margin: 0 auto; /* طرح بندی: مرکز کردن افقی */
    text-align: center; /* طرح بندی: وسط چین کردن متن */
}

.container span {
    background-color: red;
    color: white;
    padding: 5px;
}

در این مثال، margin: 0 auto; طرح بندی را برای مرکز کردن المان .container در صفحه انجام می‌دهد و text-align: center; محتوای درون آن را به صورت افقی در مرکز قرار می‌دهد. این اولین قدم برای درک اینکه چگونه CSS جریان و چیدمان المان‌ها را کنترل می‌کند، است.