حالا مثل Flexbox و CSS Grid
ما هم قابلیت تراز کردن آیتم‌های grid را داریم
پس بیایید حالا یاد بگیریم چطور این کار انجام می‌شود
و حالا بیایید روی این grid دیگر کار کنیم
پس این container دو است
پس من "display: None" را از این یکی برمی‌دارم
و در واقع بیایید اینجا قرارش دهیم
خب؟
حالا این هیچ تأثیری نداشت
چون بعداً اینجا display را بازنویسی می‌کنیم
با مقدار grid درست است؟
پس نه اینجا اما بیایید در انتها قرارش دهیم
فرض کنیم این فقط موقت است
چون البته شما
می‌خواهید بعداً به آن نگاه کنید
پس این container grid دیگر ما است
پس شماره دو
بیایید کمی کوچک‌ترش کنیم
فرض کنیم فقط ۷۰۰ پیکسل و margin برابر ۴۰
و این کمی بهتر با صفحه ما سازگار می‌شود
بیایید سریع یک grid بسازیم
تا بتوانیم کمی تمرین کنیم
یادآوری: یک container grid نیاز دارد display
روی grid تنظیم شود
سپس اینجا شش عنصر داریم
برای برخی دلایل شماره دو نداریم
اما خب مهم نیست
پس شش عنصر داریم
پس یک grid سه در دو بسازیم
سه ستون دو ردیف
پس grid-template-columns و بیایید
اولی را ۱۲۵ پیکسل قرار دهیم
دومی ۲۰۰ و یکی دیگر کمی کوچک‌تر
و اینجا از واحد FR استفاده نمی‌کنم
چون واقعاً نمی‌خواهم
یک grid واقعی بسازم
پس این فقط برای نمایش است
پس می‌توانیم عرض ثابت استفاده کنیم
پس template-rows و اینجا
۲۵۰ فرض کنیم
و ۱۰۰ پیکسل
خب این grid ما است
درست است؟
دوباره این شماره سه اینجا ارتفاعش
۱۵۰ پیکسل است و بنابراین تمام
ارتفاع track برابر ۲۵۰ پیکسل را پر نمی‌کند
به همین دلیل رنگ سیاه اینجا داریم
که پس‌زمینه این container است
و می‌بینید که فضای خالی زیادی
در اطراف این grid وجود دارد
و این همان چیزی است که حالا درباره‌اش صحبت خواهیم کرد
تراز کردن آیتم‌های grid کمی متفاوت است
نسبت به Flexbox
چون می‌توانیم هم tracks داخل container را تراز کنیم
و هم آیتم‌های grid داخل tracks
و این به این دلیل است که گاهی اوقات آیتم‌های grid
کوچکتر از سلول‌هایی هستند که در آن قرار دارند
اما بیایید با تراز کردن tracks
داخل container شروع نکنیم
پس اساساً ستون‌ها و ردیف‌ها
داخل container grid
و این فقط در این حالت ممکن است
چون خود grid
پس این یکی کوچکتر از container grid است
همانطور که گفتم فضای خالی زیادی اینجا هست
و پس فضایی هست برای تراز کردن tracks
داخل container
پس بیایید اینجا به عنوان کامنت بنویسیم
تراز کردن tracks داخل container
و این‌ها اساساً برای توزیع فضای خالی هستند
پس فضای خالی
فقط برای اینکه اینجا به عنوان یک کامنت مهم داشته باشید
پس اینجا توزیع می‌کنیم
و بنابراین property‌هایی که برای این استفاده می‌کنیم
justify-content و align-content هستند
پس این دو property که با content تمام می ‌شوند
برای تراز کردن tracks داخل container هستند
و بیایید با justify-content شروع کنیم
که احتمالاً متوجه شده‌اید دقیقاً مثل Flexbox است
و همان کار را انجام می‌دهد
و واقعاً همین کار را انجام می‌دهد
پس اگر آن را روی center قرار دهیم
این تمام tracks را داخل container تراز می‌کند
دقیقاً همین اتفاق افتاد
و این همان اتفاقی است که در Flexbox هم می‌افتد
پس این property ممکن است قبلاً برایتان واضح باشد
حالا می‌توانیم مثل مقادیر دیگر هم استفاده کنیم
پس می‌توانیم مثلاً بگوییم "space-between"
که ممکن است مفید باشد
و دقیقاً مثل Flexbox
شاید انتظار داشتید این نتیجه را
که فضای خالی بین این سه track
به طور مساوی تقسیم شد
بین این سه track
درست است؟
اما بیایید این را خاموش کنیم
و مثل این مرکز بگذاریم
و بنابراین می‌توانیم آن‌ها را به صورت افقی تراز کنیم
داخل container
اما البته می‌توانیم tracks را به صورت عمودی هم تراز کنیم
و برای این کار ما align داریم
اما حالا items نیست بلکه content است
پس aligned-content که یک مورد جدید است
و اینجا دوباره برای مثال از center استفاده کنیم
و همین شد
با این کار کل grid حالا در مرکز
داخل grid container قرار گرفته است
و البته می‌توانیم کمی gap هم به خودمان بدهیم
مثلاً 50
و این شاید حتی کمی بهتر آن را نشان دهد
و البته همچنین می‌تواند
مثل space-between هم باشد مثل این
پس هر track را به یکی از دو انتها می‌راند
پس اولی به بالا دیگری به پایین
و سپس چیزهایی مثل start یا end هم وجود دارد
و این‌ها در واقع با Flexbox متفاوت هستند
پس شما اینجا واقعاً این پیشنهاد را می‌بینید
که می‌گوید "flex end"
اما این فقط روی Flexbox کار می‌کند
پس این کمی گیج‌کننده است
و مطمئن نیستم چرا این کار را این‌طور کردند
اما خب در CSS Grid به آن "end و start" می‌گویند
در حالی که در Flexbox به آن "flex end" و "flex start" گفته می‌شود
درست است؟
پس دوباره start اما بیایید آن را در مرکز قرار دهیم
پس مرکز کردن عناصر در CSS
چیزی است که معمولاً خیلی دوست داریم انجام دهیم
باشه
و همین بود درباره تراز کردن tracks
داخل container
و دوباره این فقط منطقی است
چون grid container از خود grid
بزرگتر است
پس خود grid فقط
مجموع عرض این ستون‌ها به اضافه gap است
اما container عرض بزرگ‌تری دارد
درست است؟
و حالا بیایید به تراز کردن tracks برویم
یا در واقع تراز کردن آیتم‌ها
داخل سلول‌ها
و می‌توان گفت این properties درباره
جابجایی آیتم‌ها داخل سلول‌ها است
و بیایید با align-items شروع کنیم
و این را از قبل در Flexbox یاد دارید درست است؟
پس فکر می‌کنید چه اتفاقی می‌افتد
وقتی این را هم روی center قرار دهیم؟
و توجه داشته باشید که این
درباره تراز کردن آیتم‌ها داخل سلول‌ها است
پس در حال حاضر سلول همین کل بخش اینجاست
که رنگ پس‌زمینه دارد بنابراین قابل دیدن است
و این اساساً به این دلیل است که به طور پیش‌فرض
align-items روی stretch تنظیم شده است
مثل Flexbox درست است؟
پس دوباره همه این‌ها سلول است
اما حالا آیتم‌ها را داخل سلول‌ها جابجا می‌کنیم
پس اگر آن را روی center بگذاریم ببینیم
و همین شد
پس حالا grid items به صورت عمودی مرکز شده‌اند
چون align همیشه درباره همین است
درست است؟
و البته می‌توانیم همین کار را به صورت افقی هم انجام دهیم
و برای این کار همیشه justify است.
Justify-items
و اگر آن را هم روی center بگذاریم
پس باید فقط یک مربع کوچک ببینیم
مثل اطراف محتوا اما همه چیز مرکز شده است درست است؟
و بله این نتیجه است
و این حتی بهتر قابل مشاهده خواهد بود
وقتی که visualization شبکه را روشن کنیم
مثل این
و خب به نوعی ناپدید می‌شود
اما در هر صورت اینجا سلول‌ها را دارید و می‌بینید
که آیتم‌ها واقعاً حالا به صورت عمودی
و افقی در مرکز تراز شده‌اند
پس بیایید کمی بیشتر آزمایش کنیم
و من اینجا انجام می‌دهم تا
overlay اینجا ناپدید نشود
پس align-items به طور پیش‌فرض همان‌طور که گفتم stretch است
درست است؟
و بنابراین این چنین به نظر می‌رسد
اما ما فقط آن را روی center قرار دادیم درست است؟
اما سپس مثل همیشه start هم وجود دارد
که آن‌ها را در ابتدا قرار می‌دهد و end هم هست
و دوباره فقط end است بدون flex
درست است؟
و البته می‌توانیم همان کار را با justify-items هم امتحان کنیم
که آن هم به طور پیش‌فرض stretch است
پس مثل این از چپ تا راست کشیده می‌شود
چون justify به صورت افقی است
پس در طول محور ردیف است
و اینجا می‌توانیم end هم بگوییم
که عناصر را در این
گوشه سلول قرار می‌دهد درست است؟
اما بیایید آن‌ها را اینجا در مرکز نگه داریم
پس برای جمع‌بندی content properties
پس این دو property که به content ختم می‌شوند
درباره تراز کردن tracks داخل
container هستند درست است؟
و سپس justify به صورت افقی است یعنی روی محور ردیف
در حالی که align به صورت عمودی است یعنی روی محور ستون
و همین موضوع در پایین هم صدق می‌کند
برای تراز کردن آیتم‌ها داخل سلول‌ها
اما این دو مورد بعدی به آن‌ها "items" گفته می‌شود
پس هم align و هم justify مربوط به آیتم‌ها است
درست است؟
و حالا در نهایت به یاد دارید که در Flexbox می‌توانستیم
این‌ها را به صورت جداگانه بازنویسی کنیم
پس همین کار را اینجا هم انجام دهیم و انتخاب کنیم
مثلاً عنصر شماره سه
که این است و ارتفاع خاصی دارد
و همان‌طور که در Flexbox ما "align-self" داریم
که سپس property align-items را که بالاتر تنظیم کرده‌ایم بازنویسی می‌کند
که قبلاً در بالا داشتیم
پس الان در مرکز است بیایید آن را به انتها قرار دهیم برای مثال
پس درست مثل این و در CSS Grid می‌توانیم همچنین
justify-items را بازنویسی کنیم یعنی به صورت افقی
پس justify-self و بعد بیایید بگوییم end
دوباره فقط برای قرار دادن آن در گوشه
درست است
و این در واقع یک روش بسیار خوب است
برای مرکز کردن آیتم‌های جداگانه در CSS Grid
پس مثلاً فرض کنید این دو
در انتها باشند
پس همه آن‌ها در گوشه پایین سمت راست سلول خواهند بود
اما بعد بخواهیم یکی از آن‌ها را مرکز کنیم
پس این یکی را روی center بگذارید و همین شد
عالی بسیار خوب
با این مقدمه CSS Grid را به پایان می‌بریم
که امیدوارم زیاد گیج‌کننده نبوده باشد
اگرچه می‌دانم مقدار زیادی برای یادگیری بود
اما مثل همیشه نیازی نیست همه این‌ها را حفظ کنید
فعلاً
آنچه می‌خواهم از این چند درس اخیر برداشت کنید
این است که حالا می‌دانید CSS Grid به طور کلی چگونه کار می‌کند
چون اگر این را بدانید
پس خیلی آسان خواهد بود که به سادگی بروید
و دقیقاً property‌هایی را که نیاز دارید پیدا کنید
برای مثال در cheat sheet که به شما دادم
در درس نظری
پس همان که امیدوارم چاپ کرده باشید
و جایی روی میز خود داشته باشید مثل کاری که من انجام داده‌ام
عالی
پس این عالی است پیشرفت فوق‌العاده
خیلی خوب است که هنوز اینجا هستید
و حالا در ویدیوی بعد دانش خود را اعمال خواهیم کرد
روی صفحه‌ای که در حال ساخت آن بوده‌ایم
پس اساساً حالا طرح‌بندی خود را با استفاده از CSS Grid خواهیم ساخت
پس من برای آن خیلی هیجان‌زده‌ام
و امیدوارم شما هم همین‌طور باشید