آموزش CSS Grid: معماری طرحبندیهای دو بعدی
به نسل جدید طراحی لیآوت در وب خوش آمدید. ماژول
CSS Grid یک سیستم چیدمان دو بعدی است که کنترل کاملی بر روی ردیفها و ستونها به طور همزمان به شما میدهد. اگر Flexbox برای چیدمانهای تکبعدی عالی است، Grid به شما این قدرت را میدهد که پیچیدهترین ساختارهای وب را با کدی خوانا و بهینهسازی شده پیادهسازی کنید.
در این دوره، شما به صورت قدم به قدم با تمام جنبههای ضروری و قدرتمند CSS Grid آشنا میشوید و یاد میگیرید که چگونه گالریها و طرحبندیهای پیچیده را به سادگی معماری کنید.
یک پیشنهاد دوستانه برای شما
این دوره به صورت کامل و رایگان در کانال یوتیوب
«نیکول وب» نیز منتشر شده است. اگر دوست دارید از ما حمایت کنید و به رشد کانال کمک کنید، تماشای دوره از طریق یوتیوب بهترین گزینه است و ما را بسیار خوشحال میکند. البته در همین سایت نیز میتوانید دوره را به صورت کاملا رایگان و دستهبندی شده دنبال کنید. انتخاب با شماست!
در این دوره چه مباحثی را فرا میگیرید؟
این دوره به صورت جامع، از مفاهیم پایهای تا تکنیکهای پیشرفته Grid را پوشش میدهد:
بخش اول: مبانی و ساختار Grid
- مقدمه و معرفی قابلیتهای CSS Grid
- ایجاد اولین ساختار با تعریف ردیفها و ستونها
- مدیریت فواصل بین آیتمها با ویژگی
gap
- آشنایی با واحد قدرتمند و انعطافپذیر
fr برای تقسیمبندی فضا
بخش دوم: چیدمان و تکرار هوشمند
- تغییر موقعیت و جایگاه عناصر در Grid
- ادغام کردن سلولها و کنترل ابعاد آیتمها با دستور
span
- کنترل خودکار ستونها و ردیفها با دستورات
grid-auto
- استفاده از تابع
repeat() برای جلوگیری از تکرارنویسی
- بهکارگیری مقادیر
auto-fill و auto-fit برای ساخت گریدهای واکنشگرا
بخش سوم: تراز بندی و کنترل ابعاد
- آموزش کامل تراز بندی افقی و عمودی عناصر در دو بخش مجزا
- استفاده از مقادیر کمترین و بیشترین (minmax) برای کنترل بهتر ابعاد
بخش چهارم: پروژههای عملی
- یادگیری تعاملی و جذاب با بازی Grid Garden
- ساخت یک گالری تصاویر ساده و واکنشگرا
- نامگذاری نواحی و جایگاهبندی پیشرفته عناصر
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان فرانتاند که میخواهند بر مدرنترین ابزار Layout در CSS مسلط شوند.
- دانشجویانی که با Flexbox آشنا هستند و به دنبال تکمیل مهارتهای چیدمان خود هستند.
- طراحان وبی که قصد پیادهسازی طرحهای پیچیده و مبتنی بر گرید را دارند.
با اتمام این دوره، شما توانایی کامل برای طراحی و پیادهسازی هر نوع لیآوت دو بعدی را خواهید داشت و میتوانید پروژههای خود را به سطح بالاتری از حرفهایگری برسانید.
مدرس
محمدرضا مهاجری
درسها
۱۴ قسمت
مدت زمان
+۴ ساعت
دانشجوها
+۱۲۰۰
وضعیت دوره
دوره تکمیل شده
سطح دوره
مقدماتی تا پیشرفته
پیشنیازها
HTML, CSS
