خب تا الان،
ما در واقع گذاشتیم CSS Grid خودش تصمیم بگیرد که
آیتم‌های ما را به صورت کاملاً خودکار کجا قرار دهد
فقط بر اساس ترتیب کد HTML.
با این حال، گاهی اوقات مهم است که عناصر را به صورت دستی در
یک سلول Grid غیر از پیش‌فرض آن قرار دهیم.
پس حالا بیایید یاد بگیریم چطور.
و بیایید با خاموش کردن این یکی شروع کنیم.
این را دوباره روی One FR تنظیم کنید.
و در واقع، بیایید ارتفاع را دوباره فعال کنیم،
تا ظاهر آن کمی بهتر شود.
و همچنین اینجا فاصله بین سلول‌ها را افزایش می‌دهم
چون این کار دیدن آنچه می‌خواهیم انجام دهیم را آسان‌تر می‌کند.
خب، حالا می‌بینید.
خوب، اما حالا بیایید به موضوع این ویدیو برویم،
که درباره نحوه قرار دادن یک آیتم خاص Grid است،
مثل این یکی؛
مثلاً در یک سلول Grid دیگر،
مثل اینجا به عنوان مثال.
پس در یک سلول Grid که پیش‌فرض آن نیست.
خب، و برگردیم به همان اصطلاحات سلول‌های Grid
و تمام آن‌ها، اجازه دهید در واقع ابزارهای عمیق و مفیدی را به شما نشان دهم
که برای CSS Grid داریم.
اینجا می‌توانید در واقع بسیاری از
اصطلاحاتی که قبلاً در جلسه تئوری گفتم را ببینید.
پس شما شماره‌ها را دارید
برای خطوط Grid مثل یک، دو، سه، چهار، پنج.
شما gutterها را دارید.
و همچنین می‌توانید سلول‌های Grid را ببینید.
خب، اجازه دهید یکی از آن‌ها را خاموش کنم، مثل این یکی.
برای روشن کردن این، در واقع باید روی اینجا کلیک کنیم.
و بنابراین اینجا می‌بینید که در واقع تقاطع
این دو خط Grid، این سلول را ایجاد می‌کند.
فعلاً این سلول هیچ آیتم Gridی ندارد
و این کاملاً طبیعی است.
سپس اینجا چیزی به نام gutterها دارید
که می‌توانیم با gap ایجاد کنیم.
و بله، این‌ها در tracks هستند.
پس tracks ردیف‌ها، چهار track ستون خالی
مثل این هستند، درست است؟
اما حالا ما در واقع به این خطوط Grid شماره‌دار علاقه‌مندیم
چون آن‌ها به ما اجازه می‌دهند هر آیتم Grid را هر جا که می‌خواهیم قرار دهیم.
و این یکی از قابلیت‌های کلیدی CSS Grid است.
پس اجازه دهید نشان دهم چگونه.
برای این کار، من آن را روشن نگه می‌دارم.
پس در واقع از
مثالی که ابتدا گفتم استفاده می‌کنیم.
پس این آیتم Grid را در این سلول Grid قرار می‌دهیم.
در واقع، در همین موقعیت.
پس بیایید آن را انتخاب کنیم.
این عنصر شماره هشت است.
پس کلاس آن L eight است.
و ما می‌خواهیم آن را اینجا قرار دهیم.
و این ستون شماره دو است، همانطور که.
از این خط Grid قابل مشاهده است و
ردیف شماره یک، همانطور که از این خط Grid دیده می‌شود.
پس بیایید ابتدا با ستون شروع کنیم.
می‌توانیم بگوییم grid-column.
و همانطور که گفتم، این ستون شماره دو است.
و سپس می‌توانیم پایان را هم مشخص کنیم.
پس می‌گوییم که باید شروع شود
از ستون شماره دو
و پایان آن ستون شماره سه باشد.
پس دقیقاً همینجا.
اگر اکنون این را ذخیره کنم، می‌بینید
که در واقع به ستون دوم منتقل شده است.
حال این یک ردیف اضافی ایجاد کرد.
اما حالا بیایید آن را اصلاح کنیم و آن را به ردیف شماره یک منتقل کنیم.
پس دوباره آن را روشن می‌کنیم.
پس حالا به ردیف Grid شماره یک، دو، دو می‌رویم، درست است؟
و به خاطر داشته باشید که این دو ویژگی
همیشه باید روی آیتم‌های Grid استفاده شوند.
پس این‌ها، مثل grid-template-columns،
rows و gaps روی container Grid استفاده می‌شوند
در حالی که این‌ها روی آیتم‌های Grid اعمال می‌شوند.
به هر حال، بیایید آن را دقیقاً همانجا قرار دهیم که می‌خواهیم.
و تمام.
حالا دقیقاً همان جایی است که آن را قرار دادیم.
و حالا بیایید همین کار را با این یکی انجام دهیم.
و می‌خواهم آن را پایین اینجا قرار دهم.
پس ابتدا اجازه دهید آن را انتخاب کنم.
این عنصر شماره دو است.
و حالا می‌خواهم شما ویدیو را متوقف کنید
و دوباره کد را بنویسید.
این آیتم را دقیقاً در همین سلول قرار دهید.
فکر می‌کنید می‌توانید این کار را انجام دهید؟
امیدوارم بتوانید.
و وقتی آماده شدید، یک دقیقه دیگر می‌بینمتان.
خوب، پس بیایید دوباره visualization را روشن کنیم
و سپس کد خود را بنویسیم.
پس این grid-column است.
یک، دو، دو، درست است؟
پس باید از اینجا شروع شود و به اینجا برسد.
و برای ردیف، باید از دو به سه برود.
پس grid-row از دو تا سه.
و این هم انجام شد.
عالی.
و در واقع، اگر مقدار دوم اینجا
فقط یک واحد بیشتر از مقدار اول باشد،
می‌توانیم آن را حذف کنیم.
پس می‌توانیم این کار را انجام دهیم
و آیتم همچنان در همان مکان باقی می‌ماند.
با این حال، فکر می‌کنید چه اتفاقی می‌افتد
وقتی یک مقدار دوم مشخص کنیم
که در واقع فقط یک واحد بیشتر نیست؟
خب، ما این را داشتیم.
اما اگر این کار را انجام دهیم، چه می‌شود؟
پس فکر می‌کنید حالا چه شکلی خواهد شد؟
خب، آن را ذخیره کنیم.
خب، حالا این آیتم
در دو سلول امتداد یافته است.
پس دوباره آن را برگردانیم.
و بله، این دقیقاً همان چیزی است که مشخص کردیم.
پس ستون ۱، ۲، ۳
و بنابراین حالا این آیتم این دو سلول را پوشش می‌دهد.
و این همان ترفندی است که ما استفاده می‌کنیم
تا یک آیتم را روی چند سلول Grid امتداد دهیم.
و البته می‌توانیم هر عدد دیگری هم اینجا استفاده کنیم
مثل چهار، درست است؟
و حالا این آیتم روی این سه سلول امتداد یافته است.
و توجه کنید که گفتیم سه سلول، درست است؟
پس گاهی ممکن است نخواهیم اینجا محاسبه کنیم.
و به جای این کار،
می‌توانیم بگوییم span سه.
به عبارت دیگر،
به جای مشخص کردن مقدار نهایی خط Grid،
می‌توانیم بگوییم از شماره یک شروع شود
و سپس روی سه سلول امتداد یابد.
پس این حالا باید دقیقاً همان شکل را داشته باشد و دارد.
پس اجازه دهید آن آیتم دیگر را هم نگه دارم
به عنوان مرجع، در واقع.
اما این دو دقیقاً یکسان هستند، درست است؟
و اگر بگوییم span دو،
خب، همانطور که انتظار دارید،
فقط روی دو سلول امتداد می‌یابد.
و سپس مثل این،
که چندان لازم نیست،
اما فقط برای دیدن، حالا دوباره فقط یک سلول را پر می‌کنیم.
و البته می‌توانیم بگوییم span چهار
و آن را از یک طرف تا انتهای container ادامه می‌دهد.
و بیایید در واقع با همین وضعیت کار کنیم
که می‌خواهیم یک آیتم Grid
تا انتهای container امتداد یابد.
پس در برخی شرایط،
ممکن است حتی ندانیم چند ستون در Grid وجود دارد
یا ممکن است نخواهیم فکر کنیم
چند سلول باید امتداد یابد.
و در این شرایط، یک ترفند خیلی خوب وجود دارد
که می‌توانیم به جای امتداد دستی استفاده کنیم.
پس اجازه دهید دوباره این را کپی کنم
و آن را خاموش کنیم تا به عنوان مرجع نگه داشته شود.
خب؟
و اگر بخواهیم فقط یک عنصر
تا انتها امتداد یابد،
می‌توانیم از -1 استفاده کنیم.
و می‌بینید نتیجه همان است.
و البته همچنان کار می‌کند.
برای مثال، اگر از دو شروع کنیم،
پس از دو شروع می‌شود و تا انتها امتداد می‌یابد، که -1 است.
و حالا اجازه دهید سریع نشان دهم چرا این ترفند کار می‌کند.
که واقعاً یک ترفند عالی است،
یک ایده واقعاً عالی.
می‌بینید که این خطوط Grid
از یک به سه به پنج در بالای Grid می‌روند.
با این حال، در پایین Grid،
اگر ببینید، از -1 تا -5 می‌روند.
پس در واقع در جهت مخالف.
پس این یعنی،
هر یک از این خطوط Grid در واقع دو شماره دارد.
پس این یکی فقط چهار نیست،
بلکه همچنین -2 است.
و این یکی،
که آخرین است،
فقط پنج نیست،
بلکه همچنین -1 است.
و بنابراین
این است دلیل اینکه این ترفند کار می‌کند.
پس از یک شروع می‌کنیم، که اینجاست.
پس این خط Grid، یک نامیده می‌شود و -5 هم هست.
و بنابراین می‌توانیم از همین استفاده کنیم.
پس یک، و سپس تا -1 ادامه می‌دهیم
که دوباره همین آخرین خط است.
و این است دلیل اینکه این ترفند کار می‌کند.
خب؟
و در نهایت، البته، همین مورد
برای ردیف‌ها هم صدق می‌کند.
پس امتداد برای ردیف‌ها هم کار می‌کند.
پس بیایید شاید با شماره شش اینجا امتحان کنیم.
پس L six و ستون را همانجا بگذاریم که هست.
و البته می‌توانیم،
اگر بخواهیم فقط یکی از آن‌ها را تغییر دهیم.
پس بیایید بگوییم grid-row.
فعلاً روی شماره سه است.
اما فرض کنیم می‌خواهیم تا شش برود.
خب، این همان چیزی نیست که قصد داشتم.
فکر کنم سه گفتم، نه چهار.
پس بله، این همان چیزی است که می‌خواستم.
خب، خیلی خاص به نظر نمی‌رسد.
اما در واقع، آنچه اتفاق افتاد این بود
که یک ردیف جدید در اینجا اضافه شد.
و این تمام آن چیزی است که می‌خواستیم نشان دهیم.
خب، بیایید تا چهار ادامه دهیم.
پس حالا می‌بینید که یک ردیف جدید اضافه شده است.
پس سه، و سپس به دلایلی چهار اینجا جا افتاده،
اما پنج درست در انتها قرار دارد.
پس شاید این مثال چندان جالب نباشد،
اما می‌توانیم کمی بیشتر با آن آزمایش کنیم.
پس اگر این یکی را برای لحظه‌ای خاموش کنیم،
فضای بیشتری خواهیم داشت،
تا بتوانیم این آیتم را امتداد دهیم.
پس این شماره هشت است، که قبلاً انتخابش کرده‌ایم.
و اگر مثلاً اینجا سه بگذاریم،
همانطور که انتظار داشتیم، حالا این آیتم روی دو سلول Grid امتداد می‌یابد.
روی این دو ردیف.
و همین کار جواب می‌دهد.
اگر بگوییم -1،
پس تا انتها امتداد می‌یابد.
یا اگر بگوییم span دو.
حالا اگر گفتیم span سه،
یک ردیف اضافی پایین‌تر ایجاد می‌شود.
همانطور که قبلاً دیدیم این اتفاق می‌افتد.
خب.
اما بیایید دوباره آن را خاموش کنیم.
باز هم فقط آن را به عنوان مرجع نگه می‌دارم.
بیایید این یکی را دوباره روشن کنیم،
چون ظاهرش را دوست دارم.
و بله، فکر می‌کنم حالا کافی است که درباره این موضوع نشان دادم.
اما این ارزش آزمایش زیاد دارد.
پس امیدوارم کمی وقت داشته باشید تا این کار را امتحان کنید.
می‌توانید عناصر مختلف را اینجا انتخاب کنید
و ببینید چه اتفاقی می‌افتد
وقتی آن‌ها را در سلول‌های مختلف قرار می‌دهید
و کمی امتداد می‌دهید.
و حتی می‌توانید آن‌ها را همپوشانی کنید.
یعنی آیتم‌های مختلف Grid را در یک سلول قرار دهید
و خواهید دید که واقعاً جواب می‌دهد.
پس کمی با آن سرگرم شوید.
و بعد من شما را در جلسه بعدی می‌بینم.
برای درس بعدی آماده باشید.