خب برای جمع‌بندی این بخش
این هم چالش برنامه‌نویسی شماره سه
امیدوارم هنوز از این مثال خسته نشده باشید
چون یک بار دیگه با هم روش کار خواهیم کرد
خب در چالش قبلی
شما این layout رو با استفاده از Flex Box ساختید
و همونطور که ممکنه حدس زده باشید
حالا وقتش رسیده که دقیقاً همون layout رو با CSS Grid بسازیم
متوجه شدید؟
حالا وقتی که اینو با Flex Box ساختیم
این سه ستون رو توی یک container جمع کردیم
پس این سه عنصر رو داخل یک عنصر والد قرار دادیم
و بعد فقط روی همون از Flex Box استفاده کردیم
یکم مثل کاری که در پروژه وبلاگمون انجام دادیم می‌شه گفت
درسته؟
اما حالا من واقعاً می‌خوام شما برید
و اون div container رو حذف کنید
و اساساً از همه اینها استفاده کنید
یعنی کل عنصر اینجا به عنوان container Flex استفاده شود
متوجه شدید؟
حالا یه نکته مهم دیگه که باید بهتون بگم
وقتی شروع به طراحی گرید می‌کنید اینه که
این قسمت اولین ستون خواهد بود
پس این تصویر درسته؟
و بنابراین یادتون باشه
این یکی عرض ثابتی برابر ۲۵۰ پیکسل داره
پس احتمالاً باید ستون خودتون رو با این اندازه تنظیم کنید
درسته؟
پس فقط اینو به خاطر داشته باشید
و بله
همین در واقع تمام کاریه که برای این چالش نیاز دارید انجام بدید
پس جزئیات کوچیکی که قبل با Flex Box انجام دادیم
و منظورم اینه که اینجا و رنگ‌ها
می‌خوام دست نخورده بمونن
پس همچنان برای اون از Flex Box استفاده کنید
و از CSS Grid فقط برای layout کلی اینجا استفاده کنید
که در واقع دو بعدی است
و بنابراین CSS Grid برای این خیلی مناسب است
همیشه مثل همیشه هر چقدر زمان لازم دارید بردارید
و بعد از تموم شدن دوباره اینجا بهمون ملحق بشید
(توقف)
درسته؟
و من ۱۰۰٪ مطمئنم که براتون سرگرم‌کننده بوده
پس همونطور که گفتم بیایید شروع کنیم
با حذف این container اینجا به همراه تگ بسته‌ش
البته
بعد بیایید این بالا
و همه ردپای Flex Box رو در این layout حذف کنیم
و در واقع بیایید همچنین از شر
این کلاس Clear Fix احمقانه خلاص شیم
پس اینجا containerمون رو داریم
که الان displayش روی flex ست شده
پس بیا تغییرش بدیم به display
grid مثل این
و بعد همچنین نیاز داریم مشخص کنیم
البته ستون‌ها
پس grid
template
columns
و بعد یادتون باشه درباره ستون اول چی گفتم
پس ستون اول
می‌خوایم این تصویر اینجا باشه که عرضش ۲۵۰ پیکسله
پس در واقع یه عرض ثابت داریم که می‌خوایم حفظش کنیم
پس بیایید ستون اول رو دقیقاً ۲۵۰ پیکسل تعیین کنیم
و بعد دو ستون دیگه
می‌خوایم هر دو دقیقاً همون فضای باقیمونده رو بگیرن
و همچنین باید کل فضای باقی‌مونده رو پر کنن
پس بنابراین عرض هر دو رو "1fr" قرار می‌دیم
و با این بیایید ببینیم چی می‌شه
خب واقعاً هیچ تغییری نکرد
اوه و البته
چون ما همین الان کلاس container رو حذف کردیم
پس این کد باید در واقع روی خود محصول اعمال بشه
پس کجاست اون؟
آه بله همینجا
خب ببینیم
آه عالی
خیلی بهتر به نظر میاد
خب هنوز کامل نیست اما یه چیزی شد
درسته؟
پس بیایید این کد container رو حذف کنیم
که باعث شد این اشتباه کوچک پیش بیاد
و حالا بیایید فکر کنیم
درباره این عنوان اینجا و همچنین دکمه
که جزو این سه ستون نیستن
درسته؟
پس کاری که می‌خوایم براشون بشه اینه
که از اول تا آخر کشیده بشن
از شروع تا پایان
درسته؟
پس اون عنوان دقیقاً همین عنوانه
یعنی عنوان محصول
و بنابراین اینجا می‌گیم "grid"
"column"
"one to minus one"
پس این یه ترفنده که امیدوارم تا حالا بلدش باشید
و حالا بیایید در واقع اون رو کپی کنیم
پس این یکی هم باید دقیقاً همان کار را انجام دهد
درسته؟
پس دکمه را اینجا اضافه کنیم
و عالیه
حالا اینجا هنوز بعضی فاصله‌ها هست که نمی‌خوایم
و دلیلش اینه که به سادگی خاصیت gap
که قبلاً از Flex Box داشتیم را حفظ کردیم
اما حالا این خاصیت column-gap است
و در واقع همین الان کارمون تمومه
پس شاید این یک مقدار زیادی ساده بود
پس اساساً ترفند اصلی اینجا
برای ثابت موندن این عرض این بود که
این ستون را دقیقاً هم‌اندازه تصویر قرار بدیم
همانطور که قبلاً اینجا انجام داده بودیم
و بعد بقیه کارها به صورت خودکار انجام شد
پس این ردیف هم در واقع ارتفاعی برابر ۲۵۰ پیکسل دارد
چون این ارتفاع بزرگترین محتوای موجود در اینجا است
پس این تصویر
درسته؟
و فقط برای بررسی سریع آن
همیشه دوست دارم از این grid overlay استفاده کنم
چون خیلی واضح نشان می‌دهد دقیقاً چه اتفاقی می‌افتد
و دوباره می‌بینیم که این ردیف کامل
یعنی همه عناصر اینجا عرض دارند یا
در واقع ارتفاعی برابر با ۲۵۰ دارند
و این یکی نه
اما این به سادگی
به خاطر کمبود محتوا در آن است
اما به هر حال با این ما در واقع موضوع
CSS Grid و همچنین کل این بخش بزرگ
در مورد ساخت layout با CSS را تمام کردیم
پس این بخش واقعاً یک بخش بنیادی
و مهم بود که پایه را برای ادامه دوره می‌گذارد
برای بقیه دوره
و بنابراین باید یک بار دیگر به شما هشدار بدهم که برای پیشرفت
در بقیه دوره حالا باید مطمئن شوید
که واقعاً این مطالب را خوب درک کرده‌اید
پس لازم نیست کامل باشد
نیازی نیست همه خصوصیات را حفظ کنید
اما باید حداقل بفهمید که چگونه
این تکنولوژی‌هایی که یاد گرفتیم کار می‌کنند
و کمی هم درباره نحوه استفاده از آن‌ها
پس هرچقدر زمان نیاز دارید برای تمرین صرف کنید
تا جایی که می‌توانید تمرین کنید
و فقط بعد از آن با هم به بخش بعدی برویم
که در واقع یکی از هیجان‌انگیزترین بخش‌هاست فکر کنم
حداقل در کل این دوره
پس قراره درباره طراحی وب صحبت کنیم
و قوانین و دستورالعمل‌های مختلف زیادی یاد بگیریم
و در واقع بلافاصله هم آن‌ها در یک پروژه جدید
اعمال می کنیم
پس وقتشه که از پروژه وبلاگمون خداحافظی کنیم اینجا
چون در بخش بعد یک پروژه جدید شروع خواهیم کرد
اما به هر حال حرف زدن کافیست
و به زودی شما را در آن بخش بعدی می‌بینم