در این درس ما از
بسیاری از چیزهایی که تازه درباره CSS Grid یاد گرفتیم استفاده خواهیم کرد
و از آن برای ساختن یا بلاک کردن layout پست استفاده خواهیم کرد
پس این بخش تمام شد بیایید به اینجا برگردیم
پس اساساً برمی‌گردیم به URL اصلی خانه
و این همان layoutی است که قبلاً ساختیم
با Flexbox درست است؟
پس کمی فاصله می‌دهیم تا واقعاً بتوانیم آن را ببینیم
و حالا می‌خواهیم دقیقاً همان چیز را
یک بار دیگر بازتولید کنیم اما این بار با استفاده از CSS Grid
پس دیگر به این نیاز نداریم
سپس پایین‌تر مقدار زیادی
کد داریم که با Flexbox نوشتیم
و در واقع بسیاری از این‌ها را می‌خواهیم نگه داریم
پس برای مثال ما از Flexbox استفاده می‌کنیم اینجا برای نویسنده
اینجا در ناوبری
و همچنین اینجا در بخش پست‌های مرتبط
پس در این layout‌های جزئی کامپوننت
اساساً می‌خواهیم استفاده از Flexbox را ادامه دهیم
پس همان‌طور که قبلاً گفتم CSS Grid به خوبی
با Flexbox کار می‌کند
و بنابراین دوباره برای این layout‌های جزئی کامپوننت
ما از Flexbox استفاده خواهیم کرد اگر آن‌ها
layout‌های یک‌بعدی باشند مثل این واضح است
و این یکی اینجا
پس این فقط یک ردیف است
و اینجا هم همین‌طور فقط یک ردیف است
و پس این یک‌بعدی است
و بنابراین Flexbox برای آن عالی است
حالا از طرف دیگر
layout کلی صفحه واضحاً دوبعدی است
و بنابراین برای آن حالا می‌توانیم از CSS Grid استفاده کنیم
پس با نگاه کردن به صفحه‌مان اینجا دوباره
چه قسمت‌هایی از layout ما هستند؟
خب با header بزرگ و کلی شروع می‌کنیم
سپس این المنت مقاله را داریم
سپس این المنت aside
که در سمت راست مقاله قرار دارد
و در نهایت پایین صفحه footer را داریم
که باید از چپ تا راست ادامه پیدا کند
پس حالا از CSS Grid استفاده خواهیم کرد تا همه این‌ها را layout کنیم
حالا وقتی قبلاً از Flexbox استفاده کردیم در واقع فقط از آن
روی یک المنت row جدید استفاده کردیم که اینجا ساختیم
که شامل مقاله و aside بود یادتان هست؟
پس یک div با کلاس ایجاد کردیم
و این دو المنت را در آن قرار دادیم
و بعد از Flexbox استفاده کردیم تا کنار هم قرار بگیرند
اما حالا چون می‌توانیم یک layout دوبعدی داشته باشیم
با CSS Grid دیگر نیازی به آن نیست
و اولین کاری که انجام می‌دهیم این است که
آن را غیرفعال کنیم
پس بیایید آن کدی که برای layout Flexbox استفاده کردیم نیز غیرفعال کنیم
که برای layout Flexbox استفاده شده بود
پس layout Flexbox همه این‌هاست
پس این کد دیگر لازم نیست
و در واقع نمی‌توانیم یک کامنت داخل کامنت دیگر داشته باشیم
پس بیایید این یکی را حذف کنیم
و حالا S40 html
پس این همان المنت row است که درباره‌اش صحبت می‌کردم
که دیگر به آن نیاز نداریم
پس آن را کامنت می‌کنیم
و اینجا هم یک کامنت اضافه می‌کنیم
فقط لازم برای Flexbox
و سپس پایین‌تر بیایید تگ پایانی را هم برداریم تا
خب این یکی باشد
پس این همان است
پس آن‌ها را دوباره حذف نمی‌کنم تا داشته باشم
به عنوان مرجع اما فقط آن‌ها را کامنت می‌کنم
با استفاده از command یا control slash
خوب پس بیایید مارک‌آپ خود را بررسی کنیم
و حالا دوباره header را داریم اینجا
پس header اصلی ما مقاله aside و footer
همه به سادگی فرزندان container هستند
و این container همان چیزی است که تبدیل به grid container ما خواهد شد
پس حالا شروع به ساخت layout CSS Grid خود می‌کنیم
و بیایید با انتخاب المنت‌های مربوطه شروع کنیم
که همان container است
و دوباره ما قبلاً آن‌ها را انتخاب کرده‌ایم
اما اینجا دوباره انجام می‌دهم تا layout
در این مورد به‌خوبی از بقیه استایل‌ها جدا باشد
پس معمولاً این کار را نمی‌کنیم اما اینجا
چون یک پروژه آموزشی است
کمی متفاوت است
و بنابراین ما برعکس عمل خواهیم کرد
پس همه چیز را با هم داشتن
وقتی پروژه بزرگ بعدی را ساختیم حالا خوب است
اما به هر حال حالا به header اصلی نیاز داریم
و این یک کلاس نیست فقط خود المنت است
پس بعد مقاله سپس aside
و در نهایت footer
و حالا همان‌طور که گفتم این container
همان چیزی است که تبدیل به grid container ما خواهد شد
درست است؟ اما فقط با این کار هیچ اتفاقی نمی‌افتد چون
به طور پیش‌فرض CSS Grid
آیتم‌های گرید را در ردیف‌ها قرار می‌دهد
پس حالا باید ستون‌هایمان را تعریف کنیم
با استفاده از grid-template-columns
پس چند ستون داریم؟
خب فقط دو تاست درست است؟
یکی برای مقاله و یکی برای aside
و یادتان هست اندازه aside چقدر بود؟
فکر کنم ۳۰۰ پیکسل بود
بله پس این همان مقداری است که اینجا قرار می‌دهیم
پس این قرار است ستون دوم باشد
و به عنوان ستون اول اجازه دهید ساده باشد
و تمام فضای باقی‌مانده را اشغال کند
و برای این کار یادتان باشد می‌توانیم از ۱Fr استفاده کنیم
یا در واقع هر Fr دیگری هم می‌توانست باشد
چون این تنها یکی است اما به طور پیش‌فرض
به سادگی از ۱Fr استفاده می‌کنیم
و اگر حالا ذخیره کنیم حتماً چیزی تغییر کرده است
و در واقع حالا متفاوت به نظر می‌رسد
و در واقع حالا ظاهرش متفاوت است
پس اینجا header است
سپس اینجا مقاله داریم
و بعد اینجا aside و footer
پس در واقع یک گرید با دو ستون داریم اما
آیتم‌ها دقیقاً همان‌جا نیستند که می‌خواهیم درست است؟
پس بیایید آن را اصلاح کنیم
پس می‌خواهیم header اصلی فقط
این یک سلول نباشد
درست است؟
پس نه فقط این یک سلول
بلکه می‌خواهیم تا انتها گسترش یابد درست است؟
پس می‌خواهیم در سلول اول باشد
و در سلول دوم نیز
پس اگر این را فعال کنیم
می‌بینید که البته دو ستون ما ظاهر می‌شوند
پس اینجا خطوط گرید یک دو و سه
و برای انجام کاری که گفتم
راه‌های متعددی وجود دارد
پس اینجا یادتان باشد می‌توانیم از property grid-column
استفاده کنیم تا این المنت را همان‌جا قرار دهیم که می‌خواهیم
و سپس می‌خواستیم از یک شروع کنیم
و حالا می‌توانیم از این خطوط گرید استفاده کنیم
یا مثلاً بگوییم span ۲
و این کار می‌کند
پس در واقع ظاهرش تقریباً کامل است
حالا راه دیگری که می‌توانستیم این کار را انجام دهیم
یادتان باشد
می‌توانست یک و سپس slash minus one باشد
و دیگر نیازی نبود به تعداد ستون‌هایی که می‌خواهیم span کنیم فکر کنیم
تمام کاری که باید می‌کردیم این بود که از ابتدا تا انتها برویم
و معمولاً این همان راهی است که انجام می‌دهیم
تمام کاری که لازم است فکر کنیم همین است
و معمولاً همین روشی است که استفاده می‌کنیم
حالا همان کار برای footer
که از این نظر مشابه است
فقط کمی رنگ پس‌زمینه به آن بدهیم
تا بتوانیم به خوبی آن را ببینیم و رنگ
فعلاً اهمیتی ندارد
پس می‌بینیم footer درست مانند header قبلی است
البته به طور پیش‌فرض فقط در یک سلول گرید
اما می‌خواستیم تا سمت راست ادامه یابد
پس دقیقاً همان کاری که قبل انجام دادیم را انجام می‌دهیم
پس grid-column و ۱ / -۱
و حالا و درست است که حالا تا انتها کشیده می‌شود
تا آنجا که باید
پس این را حذف کنیم
و در واقع همین حالا
تقریباً آماده است درست است؟
فقط این فاصله وسط کم داریم
که یادتان باشد قبلاً ۷۵ پیکسل بود
پس بله این را روی container انجام می‌دهیم
این همان column-gap است
پس column-gap
۷۵ پیکسل
و خب
تمام شد
پس مقاله دوباره ۸۲۵ پیکسل عرض دارد
همان‌طور که از ابتدا مشخص کرده بودیم
در اولین layout float خود درست است؟
اما حالا دیگر نیازی به مشخص کردن این عرض نیست
چون CSS Grid به سادگی خودش این را محاسبه می‌کند
به صورت خودکار برای ما
حالا aside هم البته ۳۰۰ پیکسل است
و بنابراین همه با هم
container ۱۲۰۰ پیکسلی ما را تشکیل می‌دهند
عالی پس این تقریباً آماده است
اما می‌توانیم بهتر هم کنیم
پس معمولاً می‌خواهیم همه استایل‌های مربوط به گرید
روی grid container متمرکز شود
و این شامل فاصله‌ها هم می‌شود
حالا ما قبلاً این کار را برای فاصله افقی انجام دادیم
با استفاده از property column-gap برای این فاصله
اما بقیه فاصله‌ها
یعنی فاصله عمودی در واقع از margin می‌آید
پس یک margin اینجا وجود دارد
و همچنین مقداری margin
بله اینجا روی مقاله
پس دوباره بهتر است همه این فضاها را
روی grid container متمرکز کنیم چون باعث می‌شود کد ما
خیلی راحت‌تر قابل درک باشد وقتی بعداً آن را تحلیل کنیم
درسته؟
پس دوباره توجه کنید که اینجا margin-bottom
۶۰ دارد و header هم همین‌طور
پس این header اصلی بله
جایی اینجا نوشته که margin-bottom برابر با ۶۰ است
پس همه آن‌ها را حذف کنیم
پس می‌خواهیم روی المنت‌ها margin-bottom نداشته باشیم
و در واقع بیایم اینو اینجا ننویسیم
اما واقعاً اون فاصله اضافه رو حذف کنیم
چون این چینش با CSS Grid
در واقع چینش نهایی ما خواهد بود
پس بیایم دنبال همون ۶۰ پیکسل بگردیم
فکر کنم باید درست بالا باشه
آره اینجا تو مقاله داریمش
پس بیایم اینو کامنت کنیم
و همین کارو هم تو header اصلی انجام بدیم
این می‌تونه گیج‌کننده باشه مخصوصاً اگه چینش
خیلی بزرگ‌تر بود
پس فضای اضافه حالا رفته ولی راحت می‌تونیم برش گردونیم
فقط با یه خط CSS که اون هم هست:
row-gap: 60px
و تموم شد
حالا فضای اینجا داریم
و تو این Grid Overlay هم به خوبی دیده می‌شه
و انجامش به این شکل خیلی تمیزتره
و واقعاً خیلی بهتره برای
نگهداری کد در طولانی مدت
خب و حالا فقط برای تکمیل این عنصر aside اینجا
الان دوباره خودش رو تا پایین کشیده
فرض کنیم که ما اینو نمی‌خوایم
و می‌خوایم این عنصر فقط اینجا بالا باشه
خب چطور اینو انجام بدیم؟
در اصل چطور این عنصر رو توی
سلول Grid جا به جا کنیم؟
خب برای این کار از یکی از ویژگی‌های items استفاده می‌کنیم
مثل justify-items یا align-items درسته؟
یادتونه؟
پس برای فضای عمودی از align-items استفاده می‌کنیم
درسته؟
خب دوباره بیایم سراغ Grid Containerمون و در صورتی که
این موضوع گیج‌کننده باشه می‌تونید
اون جلسه قبلی یا Cheat Sheet رو مرور کنید جایی که
تمام ویژگی‌های CSS Grid رو لیست کردم
پس align-items یادتونه برای چینش
عنصر Grid استفاده می‌شه
یعنی خود Grid Item داخل خودش
مثلاً یکی از گزینه‌های محبوب اینه که
اون رو Center کنیم
و اینجا در واقع align-items هست
و الان این یکی اینجا به مرکز منتقل شد
الان درسته؟
و این اولین عنصر چیزی تغییر نکرد
چون این عنصر در واقع تعیین‌کننده اندازه این ردیفه درسته؟
پس اگر دقت کنید ما در واقع هیچ Grid Template Row تعریف نکردیم درسته؟
پس در اصل داریم اجازه می‌دیم CSS Grid
ردیف‌ها رو بر اساس محتواش تنظیم کنه اوکی؟
و به همین دلیله که قبلاً گفتم معمولاً
فقط ستون‌ها رو تعریف می‌کنیم و نه ردیف‌ها
چون خیلی وقت‌ها ردیف‌ها به سادگی با
محتوایی که دارن تعریف می‌شن
پس دوباره در این مثال این بخش از محتوا
تعیین‌کننده اندازه کل این ردیفه
و اگر Grid Items رو Center کنیم پس به صورت عمودی
این یکی اینجا قطعاً جابه‌جا نمی‌شه
ولی این یکی می‌شه
و حالا بیایم اونو به Start بفرستیم
و یادتون باشه که فقط Start هست نه Flex Start
مثل Flexbox
خب؟ همین
و در واقع همینه
پس این سومین روش برای ساخت همون چینش دقیق هست
و اگه از من بپرسی در واقع بهترین روش همینه
ولی حالا مطمئنم که باید کمی بیشتر این مهارت‌ها رو تمرین کنی
و می‌تونی همین کارو تو جلسه بعدی
در چالش کدنویسی نهایی این بخش انجام بدی
اما حالا مطمئنم که باید کمی بیشتر این مهارت‌ها رو تمرین کنی
و می‌تونی همین کارو تو جلسه بعدی
در چالش کدنویسی نهایی این بخش انجام بدی
و این هم همون چالش نهایی برای این بخشه