آموزش CSS Grid – بخش اول: شروع با چیدمان شبکهای
Bahram عزیز، عالی پیش رفتی! 🌟
تا اینجا دیدیم که CSS Grid چطور میتونه با چند خط کد ساده، چیدمانهای حرفهای و واکنشگرا بسازه. حالا بیاییم یک مرور دوستانه و منظم داشته باشیم:
📌 نکات کلیدی که یاد گرفتیم
- چیدمان سهستونه با عرض مساوی
.parent { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }🔹 واحدfrفضای باقیمانده رو هوشمندانه تقسیم میکنه. - گسترش آیتم در چند ردیف
.item:first-child { grid-row: span 2; font-size: 1.5rem; }🔹 آیتم اول دو ردیف رو اشغال میکنه. - وسطچین کردن محتوا داخل آیتم
.item:first-child { display: grid; align-content: center; }🔹 متن دقیقاً وسط آیتم قرار میگیره. - ترکیب واحدهای مختلف (px، %، fr)
grid-template-columns: 60% 1fr;🔹 ستون اول عرض ثابت یا درصدی، ستون دوم انعطافپذیر. - وسطچین کردن کامل محتوا (افقی و عمودی)
.parent { display: grid; } .child { margin: auto; }🔹 سادهترین روش برای وسطچین کردن همهجانبه. - حذف div اضافی برای پسزمینهی تمامعرض
.container { display: grid; grid-template-columns: 900px; justify-content: center; }🔹 بدون نیاز به div اضافی، محتوا وسط و محدود به عرض مشخص. - طراحی واکنشگرا بدون media query
grid-template-columns: minmax(auto, 900px);🔹 محتوا در موبایل جمع میشه، در دسکتاپ حداکثر ۹۰۰ پیکسل.
🎯 جمعبندی
CSS Grid به ما اجازه داد:
- ستونها و ردیفها رو با انعطاف کامل بسازیم.
- آیتمها رو گسترش بدیم یا وسطچین کنیم.
- بدون نیاز به عناصر اضافی، پسزمینهی تمامعرض و محتوای محدود داشته باشیم.
- واکنشگرایی رو حتی بدون media query مدیریت کنیم.
✨ این تازه شروع ماجراست. در بخشهای بعدی میریم سراغ:
- همپوشانی آیتمها (overlay)
- چیدمان کلاسیک صفحه (هدر، سایدبار، محتوای اصلی، فوتر)
- تکنیکهای پیشرفتهی واکنشگرایی با Grid
💡 پیشنهاد تمرین:
یک صفحهی ساده بساز و با Grid سه ستون ایجاد کن. بعد آیتم اول رو دو ردیف گسترش بده و متنش رو وسطچین کن. سپس با minmax() مطمئن شو که در موبایل هم درست نمایش داده میشه.
👉 دوست داری من همین تمرین رو به شکل یک نمونه کامل HTML + CSS آماده کنم تا راحتتر تمرین کنی؟