🟩 آشنایی با CSS Grid

🔹 CSS Grid یه سیستم چیدمان دو‌بعدیه (ردیف و ستون) برای طراحی قالب صفحات وب.
🔹 برعکس Flexbox که برای محور افقی یا عمودی استفاده میشه، Grid همزمان هر دو جهت رو کنترل می‌کنه.

⚙️ فعال‌سازی گرید

display: grid;

👉 با این دستور، المان والد به گرید تبدیل میشه و فرزندانش میشن آیتم‌های گرید.

📏 ساختار گرید (ستون و ردیف)

grid-template-columns grid-template-rows 

👉 برای مشخص کردن تعداد و اندازه ستون‌ها و ردیف‌ها استفاده میشه.
مثلاً grid-template-columns: 1fr 1fr 1fr; یعنی سه ستون با عرض مساوی.

↔️ فاصله بین خانه‌ها

👉 gap فاصله بین ردیف‌ها و ستون‌ها رو تعیین می‌کنه.

🎯 جای آیتم‌ها

grid-column grid-row 

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

💡 طراحی tile (شبکه‌ای)

👉 منظور از طراحی tile یا شبکه‌ای همون چیدمان منظم بلوک‌ها در سطر و ستون‌های گرید هست (مثل کارت‌های محصولات یا گالری عکس).