CSS Website Layout

🔹 Website Layout یعنی چی؟

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

🔹 اجزای اصلی Layout در وب‌سایت

معمولاً هر سایت شامل این بخش‌هاست:

  1. Header (هدر) → شامل لوگو، عنوان سایت، منو

  2. Navigation Bar (ناوبری) → منوی اصلی سایت

  3. Main Content (محتوا) → متن، تصاویر، مقالات، محصولات

  4. Sidebar (سایدبار) → لینک‌ها یا ابزارهای کمکی

  5. Footer (فوتر) → اطلاعات تماس، کپی‌رایت

🔹 روش‌های ساخت Layout در CSS

1) استفاده از CSS Float (قدیمی)

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>Layout با Float</title> <style> * { box-sizing: border-box; } .header { background: lightcoral; padding: 20px; text-align: center; } .nav { float: left; width: 20%; background: lightgray; height: 300px; } .content { float: left; width: 60%; background: white; height: 300px; } .sidebar { float: left; width: 20%; background: lightblue; height: 300px; } .footer { clear: both; background: gray; text-align: center; padding: 10px; } </style> </head> <body> <div class="header">هدر سایت</div> <div class="nav">منو</div> <div class="content">محتوا</div> <div class="sidebar">سایدبار</div> <div class="footer">فوتر</div> </body> </html>

2) استفاده از CSS Flexbox (مدرن‌تر و ساده‌تر)

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>Layout با Flexbox</title> <style> * { box-sizing: border-box; } body { margin: 0; } .header { background: coral; padding: 20px; text-align: center; } .main { display: flex; } .nav { flex: 1; background: lightgray; padding: 20px; } .content { flex: 2; background: white; padding: 20px; } .sidebar { flex: 1; background: lightblue; padding: 20px; } .footer { background: gray; text-align: center; padding: 10px; } </style> </head> <body> <div class="header">هدر سایت</div> <div class="main"> <div class="nav">منو</div> <div class="content">محتوا</div> <div class="sidebar">سایدبار</div> </div> <div class="footer">فوتر</div> </body> </html>

3) استفاده از CSS Grid (جدیدترین و قدرتمندترین روش)

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>Layout با Grid</title> <style> * { box-sizing: border-box; } body { margin: 0; } .grid { display: grid; grid-template-areas: "header header header" "nav content sidebar" "footer footer footer"; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 1fr auto; height: 100vh; } .header { grid-area: header; background: coral; padding: 20px; text-align: center; } .nav { grid-area: nav; background: lightgray; padding: 20px; } .content { grid-area: content; background: white; padding: 20px; } .sidebar { grid-area: sidebar; background: lightblue; padding: 20px; } .footer { grid-area: footer; background: gray; text-align: center; padding: 10px; } </style> </head> <body> <div class="grid"> <div class="header">هدر سایت</div> <div class="nav">منو</div> <div class="content">محتوا</div> <div class="sidebar">سایدبار</div> <div class="footer">فوتر</div> </div> </body> </html>

✅ نتیجه:

  • Float → قدیمی و مشکل‌ساز (امروزه کمتر استفاده می‌شه)

  • Flexbox → عالی برای ساخت Layoutهای یک‌بعدی (افقی یا عمودی)

  • Grid → بهترین گزینه برای Layoutهای دوبعدی (ستون + ردیف)