✅ Layout Techniques در CSS

---

---

✅1. Block

• المان به‌صورت بلاک نمایش داده میشه.
• عرضش کل صفحه رو می‌گیره (تا وقتی محدودش نکنی).
• همیشه از خط جدید شروع میشه.

مثلاً:

div {
  display: block;
}

HTML:

<div>این یک div است</div>
<div>این div دوم است</div>

→ div دوم زیر div اول قرار می‌گیره.

---

---

✅ 2. Inline

• المان درون خطی است.
• نمی‌توان بهش width یا height داد.
• کنار المان‌های دیگه میاد.

مثلاً:

span {
  display: inline;
}

HTML:

<span>اول</span>
<span>دوم</span>

→ هردو در یک خط دیده میشن.

---

---

✅3. Inline-block

• مثل inline کنار هم میاد.
• ولی میتونی width و height بهش بدی.

مثلاً:

span {
  display: inline-block;
  width: 100px;
}

---

---

---

---

---

---

✅ 4. Flexbox

Flexbox یک سیستم قدرتمند چیدمان در CSS است که ساختن طراحی‌های پیچیده را ساده می‌کند. با Flexbox می‌توان المان‌ها را به‌راحتی در محور افقی یا عمودی مرتب کرد، فاصله‌های مساوی ایجاد کرد، ترتیب المان‌ها را تغییر داد و صفحات ریسپانسیو و منظم ساخت.

ویژگی‌هایی مثل:

• flex-direction (جهت چیدمان المان‌ها)
• justify-content (تراز افقی)
• align-items و align-content (تراز عمودی)
• flex-wrap (شکستن آیتم‌ها به چند ردیف)
• gap (فاصله بین آیتم‌ها)
• flex-grow, flex-shrink, flex-basis (کنترل اندازه و رشد آیتم‌ها)
• order (تغییر ترتیب المان‌ها بدون تغییر HTML)

همه و همه باعث می‌شوند Flexbox ابزاری ضروری برای طراحی‌های مدرن و واکنش‌گرا باشد.

---

---

✅ 5. Grid

Grid یه سیستم قدرتمند برای چیدمان صفحه است:

• المان رو تبدیل به گرید کانتینر میکنه.
• میتونی صفحه رو به ستون‌ها و ردیف‌ها تقسیم کنی.
• هر آیتم رو تو هر خونه بذاری.

مثلاً:

.container {
  display: grid;
}

---

✅ display: grid

.container {
  display: grid;
}

---

---

✅ grid-template-columns

• تعداد و اندازه ستون‌ها.

مثلاً:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
}

→ دو ستون ۲۰۰px.

---

---

✅ grid-template-rows

• تعداد و اندازه ردیف‌ها.

مثلاً:

grid-template-rows: 100px 300px;

---

---

✅ grid-template-areas

• اسم‌گذاری خونه‌های گرید برای چیدمان راحت‌تر.

مثلاً:

grid-template-areas:
  "header header"
  "sidebar content";

---

---

✅ grid-area

• آیتم رو تو گرید قرار میده با نام.

مثلاً:

.header {
  grid-area: header;
}

---

---

✅ grid-column و grid-row

• المان رو در یک محدوده خاص قرار می‌ده.

مثلاً:

.item {
  grid-column: 1 / 3;
}

→ یعنی از ستون ۱ تا قبل از ۳.

---

---

✅ grid-gap

• فاصله بین خونه‌ها.

مثلاً:

grid-gap: 20px;

---

---

✅ justify-items و align-items

• جای المان‌ها تو هر خونه رو مشخص می‌کنه:
  • start
  • end
  • center

---

---

✅ place-items

• خلاصه justify-items و align-items

مثلاً:

.container {
  place-items: center;
}

---

---

✅ مثال Grid

---

HTML:

<div class="container">
  <div class="item header">Header</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item content">Content</div>
</div>

---

CSS:

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content";
  gap: 10px;
}

.header {
  grid-area: header;
  background: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background: lightgreen;
}

.content {
  grid-area: content;
  background: lightcoral;
}

---

→ صفحه دو ستونه ساخته میشه با header بالا.

---

---

✅ 6. Positioning

چیدمان المان‌ها روی محور X, Y.

---

✅ static

• پیش‌فرض
• هیچ تغییری در جای المان نمیده.

---

✅ relative

• المان رو نسبت به جای قبلی خودش جابجا می‌کنه.

مثلاً:

p {
  position: relative;
  top: 20px;
}

→ پاراگراف ۲۰px پایین میاد.

---

---

✅ absolute

• المان رو از جریان طبیعی صفحه خارج می‌کنه.
• نسبت به اولین والد position دار خودش جای‌گذاری میشه.

مثلاً:

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

---

---

✅ fixed

• المان نسبت به کل صفحه ثابت می‌مونه.
• با اسکرول حرکت نمی‌کنه.

مثلاً:

div {
  position: fixed;
  top: 0;
  left: 0;
}

---

---

✅ sticky

• مثل relative عمل می‌کنه تا وقتی به نقطه مشخص برسه.
• بعد می‌چسبه به صفحه.

مثلاً:

header {
  position: sticky;
  top: 0;
}

---

---

✅ z-index

• وقتی المان‌ها روی هم قرار می‌گیرن، تعیین میکنه کدوم جلو باشه.

بزرگ‌تر → جلوتر

مثلاً:

.box {
  position: absolute;
  z-index: 10;
}

---

---

✅ stacking context

• محیطی که z-index درونش عمل میکنه.
• ایجاد میشه وقتی المان‌ها:
  • position داشته باشن
  • opacity < 1 باشه
  • transform داشته باشن

---

---

✅ 7. Float

قدیمی‌تره ولی دانستنش لازمه.

• المان رو سمت چپ یا راست می‌چسبونه.
• متن یا المان‌های بعدی دورش می‌پیچه.

مثلاً:

img {
  float: left;
  margin-right: 10px;
}

---

---

✅ 8. None

• المان رو کامل ناپدید میکنه.

مثلاً:

div {
  display: none;
}

---

---

✅ امروزه بجاش از Flex یا Grid استفاده کن چون راحت‌تر و قدرتمندتره.

---

---

✅ خلاصه

ویژگی	Flex	Grid
مناسب برای	چیدمان یک‌بعدی (افقی یا عمودی)	چیدمان دوبعدی (ستون و ردیف)
راحتی	بسیار سریع	پیچیده‌تر اما قدرتمند
gap	پشتیبانی کامل	پشتیبانی کامل

---

✅ قانون طلایی:

«Flex عالیه برای چیدمان خطی. Grid عالیه برای چیدمان شبکه‌ای. Position هم وقتی خاص عمل می‌خواهی.»