CSS Grid Layout Module

📌 Grid یک سیستم دو‌بعدی (هم ردیف rows هم ستون columns) برای طراحی صفحات وبه.
در حالی که Flexbox بیشتر برای یک‌بعدی (فقط در راستای ردیف یا ستون) استفاده میشه.

🔹 شروع با Grid

برای ساخت Grid کافیه روی یک کانتینر خاص display: grid بزنی:

.container { display: grid; }

🔹 تعریف ستون‌ها و ردیف‌ها

  • grid-template-columns → تعریف ستون‌ها

  • grid-template-rows → تعریف ردیف‌ها

.container { display: grid; grid-template-columns: 200px 200px 200px; /* سه ستون 200px */ grid-template-rows: 100px 100px; /* دو ردیف 100px */ }

🔹 استفاده از fr (Fraction)

واحد fr یعنی یک بخش از فضای قابل تقسیم.

.container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* ستون وسط دو برابر ستون‌های کناری */ }

🔹 فاصله‌ها

  • gap → فاصله بین ستون و ردیف

  • column-gap → فاصله بین ستون‌ها

  • row-gap → فاصله بین ردیف‌ها

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

🔹 قرار دادن آیتم‌ها

هر آیتم می‌تونه بگه در کدوم ستون یا ردیف قرار بگیره:

.item1 { grid-column: 1 / 3; /* از ستون 1 تا 3 کشیده بشه */ grid-row: 1 / 2; /* در ردیف اول */ }

🔹 ترازبندی در Grid

  • justify-items → ترازبندی افقی همه آیتم‌ها

  • align-items → ترازبندی عمودی همه آیتم‌ها

  • place-items → ترکیب هر دو

.container { display: grid; grid-template-columns: repeat(3, 1fr); height: 300px; justify-items: center; /* وسط افقی */ align-items: center; /* وسط عمودی */ }

🔹 ترازبندی کل Grid

  • justify-content → ترازبندی کل Grid افقی

  • align-content → ترازبندی کل Grid عمودی

  • place-content → ترکیب هر دو

🔹 مثال کامل

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>CSS Grid Example</title> <style> .container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 100px 100px; gap: 15px; height: 300px; background: lightblue; padding: 10px; } .item { background: coral; color: white; font-size: 20px; display: flex; justify-content: center; align-items: center; } .item1 { grid-column: 1 / 3; /* کشیده بشه روی دو ستون */ } .item4 { grid-row: 2 / 3; grid-column: 2 / 4; } </style> </head> <body> <div class="container"> <div class="item item1">آیتم 1</div> <div class="item item2">آیتم 2</div> <div class="item item3">آیتم 3</div> <div class="item item4">آیتم 4</div> </div> </body> </html>

✨ خلاصه:

  • grid-template-columns و grid-template-rows → تعریف ستون و ردیف

  • gap → فاصله بین خانه‌ها

  • grid-column و grid-row → کنترل جای آیتم‌ها

  • fr → واحد تقسیم‌بندی انعطاف‌پذیر

  • Grid = طراحی دو‌بعدی / Flexbox = طراحی یک‌بعدی