CSS Grid Layout Module
📌 Grid یک سیستم دوبعدی (هم ردیف rows هم ستون columns) برای طراحی صفحات وبه.
در حالی که Flexbox بیشتر برای یکبعدی (فقط در راستای ردیف یا ستون) استفاده میشه.
🔹 شروع با Grid
برای ساخت Grid کافیه روی یک کانتینر خاص display: grid
بزنی:
🔹 تعریف ستونها و ردیفها
-
grid-template-columns
→ تعریف ستونها -
grid-template-rows
→ تعریف ردیفها
🔹 استفاده از fr (Fraction)
واحد fr
یعنی یک بخش از فضای قابل تقسیم.
🔹 فاصلهها
-
gap
→ فاصله بین ستون و ردیف -
column-gap
→ فاصله بین ستونها -
row-gap
→ فاصله بین ردیفها
🔹 قرار دادن آیتمها
هر آیتم میتونه بگه در کدوم ستون یا ردیف قرار بگیره:
🔹 ترازبندی در Grid
-
justify-items
→ ترازبندی افقی همه آیتمها -
align-items
→ ترازبندی عمودی همه آیتمها -
place-items
→ ترکیب هر دو
🔹 ترازبندی کل Grid
-
justify-content
→ ترازبندی کل Grid افقی -
align-content
→ ترازبندی کل Grid عمودی -
place-content
→ ترکیب هر دو
🔹 مثال کامل
✨ خلاصه:
-
grid-template-columns
وgrid-template-rows
→ تعریف ستون و ردیف -
gap
→ فاصله بین خانهها -
grid-column
وgrid-row
→ کنترل جای آیتمها -
fr
→ واحد تقسیمبندی انعطافپذیر -
Grid = طراحی دوبعدی / Flexbox = طراحی یکبعدی