خوش اومدی بعد از اون جلسه تئوری که امیدوارم برات مفید بوده باشه
خب حالا بریم ادامه بدیم
درباره ساختن و اندازه‌گذاری ستون‌ها و ردیف‌های Grid
تو اولین جلسه درباره CSS Grid
یاد گرفتیم چطوری ستون‌ها و ردیف‌ها رو اینجوری بسازیم
درسته؟ خب برای من در واقع بیشترِ
جادوی CSS Grid میاد از
یک واحد خیلی جدید به اسم واحد Fr
پس وقتی از واحد Fr استفاده کنیم به‌جای
پیکسل خیلی راحت می‌تونیم
ستون‌ها و ردیف‌های انعطاف‌پذیر بسازیم
ولی وقتی از پیکسل استفاده کنیم فقط می‌تونیم
به این ترک‌ها اندازه‌های خیلی سفت و سخت بدیم
یعنی اینجا همیشه 200 پیکسل هستن هر شرایطی که باشه
پس اگه سایز رو اینجوری یا اونجوری تغییر بدم
اندازه این ستون‌ها همیشه ثابت می‌مونه درسته؟
پس یه جایی حتی از ظرفش هم بیرون زد درسته؟
و خب خیلی وقتا این چیزی نیست که ما بخوایم
در عوض ما ستون‌ها و ردیف‌های انعطاف‌پذیر می‌خوایم
و همونطور که اول گفتم برای این کار
می‌تونیم از واحد جدید Fr استفاده کنیم
مثلا بگیم می‌خوایم این ستون آخر اینجا
همیشه کل فضای باقی‌مونده رو پر کنه یا مثلا
این ستون اینجا
خب بیایم این فاصله‌ها رو یه ذره کم کنیم
که بهتر دیده بشه
شاید این یکی هم همینطور
خب اینجا معلومه که یه فضای خالی داریم
که منتظره پر بشه
و خب خیلی راحت می‌تونیم این ستون سوم رو
اینجا پرش کنیم
پس ستون سوم اینه درسته؟
اینجا به‌جای اینکه یه مقدار ثابت پیکسلی بدیم
می‌گیم یک Fr که مخفف Fractional یا همون کسر هست
یا همون "بخشی از فضا"
حالا اگه سیو کنم می‌بینی که
این ستون کشیده شد تا کل فضای خالی
موجود رو پر کنه
یعنی یه چیزی شبیه وقتی که توی Flexbox می‌گیم flex: 1
درسته؟ و حالا وقتی سایز پنجره رو تغییر می‌دم
می‌بینی که این ستون همیشه داره گسترش پیدا می‌کنه
تا همه فضای خالی رو پر کنه
ولی خب حالا اینجا خیلی کوچیک می‌شه و پس
از یه جایی به بعد باید محتوای داخلش رو هم جا بده
و به همین خاطر دوباره ممکنه Grid از ظرفش بزنه بیرون
ولی تو همه عرض‌های دیگه این ستون
تلاش می‌کنه کل فضای باقی‌مونده رو پر کنه
خب حالا همینو با این یکی امتحان کنیم
پس این یکی رو هم می‌تونیم همین مقدار بدیم
یعنی یک Fr
و اگه این کارو بکنیم
فکر می‌کنی چه اتفاقی برای این دوتا ستون میفته؟
آره درست گفتی حالا دقیقا هم‌اندازه شدن
چون دقیقا همون مقدار رو دارن
برای واحد Fr درسته؟
پس دوباره الان دقیقا هم‌اندازه هستن
و وقتی تغییر سایز بدیم هر دوتاشون
سعی می‌کنن فضای باقی‌مونده رو پر کنن
و این کارو دقیقا با یه نسبت مساوی انجام میدن
چون هر دوتاشون الان همون مقدار رو دارن درسته؟
و الان یه لحظه دیگه نشونت می‌دم چه میشه وقتی
بهشون مقدارای متفاوت بدیم ولی فعلا
می‌خوام خودت فکر کنی ببینی چطوری می‌شه
یه Grid ساخت که همه ستون‌ها هم‌اندازه باشن
پس همین‌جا ویدیو رو نگه دار و
یه Grid بساز که هر چهار ستونش هم‌اندازه باشن
بعد هم می‌تونی همین کارو
برای دو ستون و سه ستون انجام بدی
باشه؟
پس یه کم با این موضوع تمرین کن
و من یه دقیقه دیگه اینجام
خب
امیدوارم یه دقیقه وقت گذاشته باشی براش
اینجا الان من این کد رو کپی می‌کنم
و این یکی رو خاموش می‌کنم که کد قبلی رو نگه داریم
ولی امیدوارم به این نتیجه رسیده باشی که
اگه بخوایم چهار ستون هم‌اندازه داشته باشیم
باید همه‌شون رو یک Fr بذاریم
یعنی همه‌شون یک Fr باشن
و حالا هر شرایطی که پیش بیاد
اینا همیشه هم‌اندازه می‌مونن درسته؟
این خیلی قدرتمنده و خیلی به درد می‌خوره
و ما هم همیشه از این تکنیک استفاده می‌کنیم
و اگه یکی از ستون‌ها رو حذف کنیم فقط می‌مونه
سه ستون ولی همچنان هم‌اندازه می‌مونن
یعنی همشون تلاش می‌کنن
فضای موجود رو پر کنن و اونم با نسبت برابر
و همین موضوع برای دو ستون هم صدق می‌کنه
ولی بیایم دوباره برگردونیم به چهار ستون مثل قبل
خب سریع مرور کنیم که اینجا چی داره اتفاق میفته
توی این ظرف Grid در واقع اولش همه
این فضای خالی رو داریم
یعنی از این سمت تا اون سمت
و وقتی از واحد Fr اینجوری استفاده کنیم
کل اون فضای خالی تقسیم می‌شه
به صورت مساوی بین این چهار ستون
و دلیلش اینه که هر کدومشون مقدار یک دارن
ولی حالا ببینیم اگه یکی‌شون رو بذاریم دو چی میشه
مثلا یکی‌شون رو دو بذاریم
خب بیایم ببینیم خیلی عالی توضیح دادی 🌹👌 حالا برات دقیق و خط به خط ترجمه می‌کنم بدون خط خالی هر جمله روی همون خط انگلیسی هم لحن آموزشی رو نگه می‌دارم و هم تخصصی و روان می‌نویسم:
و حالا این ستون اینجا دو برابر فضای بقیه ستون‌ها رو می‌گیره
نسبت به همه‌ی ستون‌های دیگه
پس الان فضا عملاً به پنج قسمت مساوی تقسیم می‌شه
یعنی 2+1+1+1 برابر با 5 بخش می‌شه
و از بین این پنج بخش
ستون اول دوتاشو می‌گیره
و بقیه ستون‌ها هرکدوم یکی می‌گیرن
و همین منطق برقرار می‌مونه
وقتی که اندازه رو بیشتر کنیم مثلاً بذاریم سه
اون‌وقت این ستون باید نصف کل فضا رو بگیره
و برای دیدنش
بیایم در عمل کمی اینو بزرگ‌تر کنیم درسته؟
و بیایم اینو بررسی کنیم تا مطمئن بشیم
که واقعاً همینطوره
پس این Grid الان عرضش 1096 پیکسله
پس بذارید یه کم کوچیک‌ترش کنیم
می‌خوام بذارمش روی هزار پیکسل که
درک کردنش راحت‌تر بشه و این اندازه کافیه
و بنابراین این ستون تقریباً 500 پیکسل می‌گیره
که می‌شه نصف
و ستون‌های دیگه خیلی کمتر فضا دارن
یعنی عملاً هرکدوم 1/6 فضای موجود رو دارن
و می‌دونم که این ستون نصفه
چون الان 6 واحد داریم
یعنی 3+1+1+1 می‌شه 6 و ستون اول سه‌تاشو می‌گیره
که می‌شه نصف درسته؟
پس این نکته خیلی مهم و خیلی کاربردیه
و درست مثل فلکس‌باکس
این باعث می‌شه دیگه مجبور نباشیم عرض‌ها رو دستی مشخص کنیم
خب؟ حالا برگردیم به ستون‌های مساوی
می‌خوام یه چیز دیگه هم بهتون نشون بدم
اینجا می‌تونیم به جای یکی از این واحدها کلمه auto رو بذاریم
به جای یکی از این مقادیر
مثلاً اگه بگیم auto برای ستون چهارم
اون فقط دقیقاً به اندازه محتوای داخلش جا می‌گیره
یعنی فقط همون مقدار لازم برای پر کردن محتوا
و خیلی وقت‌ها توی عمل این دقیقاً همون چیزیه
که ما برای یکی از ستون‌ها لازم داریم
پس این مورد هم باید توی ذهن داشته باشید
خب ولی دوباره بیایم اینو خاموش کنیم
چون می‌خوام یه چیز دیگه هم نشونتون بدم
پس دوباره grid-template-columns رو می‌نویسیم
چون یه روش راحت‌تر وجود داره
برای نوشتن چهار بار 1fr مثل کاری که کردیم
در عوض Grid CSS یه تابع repeat معرفی کرده
که می‌تونیم فقط بنویسیم repeat و پرانتز باز کنیم
بعد تعداد ستون‌ها رو مشخص کنیم
و بگیم هرکدوم چه اندازه باشن
مثلاً بگیم 1fr و همین!
این دقیقاً معادل نوشتن چهار بار 1fr هست
و یه بار دیگه می‌بینیم
که Grid CSS کلی کارمون رو راحت‌تر کرده
خب اینو حذف می‌کنم
و البته این می‌تونه سه هم باشه
که در اون صورت یه ردیف دیگه هم ایجاد می‌شه
و این ردیف راستی بهش می‌گن ردیف ضمنی (implicit row)
در حالی‌که اون دوتای قبلی ردیف‌های صریح (explicit rows) هستن
چون اون دوتا ردیف اول رو
ما واقعاً اندازه‌هاشون رو مشخص کرده بودیم درسته؟
و بنابراین ما اون دوتا رو به طور صریح تعریف کردیم
در حالی‌که ردیف سوم عملاً به طور خودکار
اضافه شد چون توی Grid تعریف‌شده‌مون
دیگه جا کم آوردیم
پس این ردیف که خودکار اضافه شد
می‌شه ردیف ضمنی (implicit row)
و در واقع ما یه راهی برای استایل‌دهی به ردیف‌های ضمنی داریم
اما اون خارج از محدوده این دوره است
پس معمولاً همیشه یه Grid صریح تعریف می‌کنیم
مثل کاری که اینجا کردیم
با استفاده از همین دو ویژگی
خب پس دوباره بذاریمش روی چهار
و حالا سریع بریم سراغ ردیف‌ها
چون واحد fr برای ردیف‌ها هم قابل استفاده‌ست
بیایم امتحانش کنیم
و برای این کار اول باید
به کانتینر یه height بدیم چون در غیر این صورت
در واقع چیزی برای پر شدن وجود نداره درسته؟
پس بذارید نشونتون بدم و اینو می‌برم بالا
اینجا دوباره با نگه داشتن option یا alt بذاریمش
اینجا و grid-template-rows رو تعریف کنیم
و همونطور که گفتم اگه فقط اینو بذاریم اون وقت
عملاً فضایی برای پر شدن نیست اما در واقع یه مقداری هست
پس این ردیف‌ها نسبتاً بلند هستن ولی بذارید توضیح بدم چرا
این اتفاق داره میفته
دقیقاً مثل قبل ما یه المنت داریم
که 150 پیکسل ارتفاع داره درسته؟
و بنابراین کل این ردیف همون 150 پیکسل ارتفاع می‌گیره
یعنی این ردیف هم می‌شه 150 پیکسل ارتفاع
و بنابراین این برابر با یک fr محسوب می‌شه
درسته؟
پس دوباره ارتفاع این ترک (ردیف) توسط بلندترین المنتش تعیین می‌شه
که همین عنصر با ارتفاع 150 پیکسل هست
و بنابراین کل ارتفاع این ردیف
می‌شه یک fr همونطور که تعریف کرده بودیم
و بعد ترک دوم هم دقیقاً همون ارتفاع رو می‌گیره
چون اونم یک fr داره
اما حالا بیایم اینو حذف کنیم
و این همون نتیجه‌ایه
که از اول
انتظارشو داشتم
باشه؟ پس الان اینا هنوز همون اندازه رو دارن
چون همچنان یک fr هستن، ولی اندازه‌شون الان داره توسط
این ردیف مشخص میشه، چون اینجا همون ارتفاعیه که لازمه
تا این ردیف ساخته بشه.
خب، همونطور که گفتم
بیایم یه ارتفاع برای این کانتینر تعریف کنیم.
مثلاً اگه بگیم 600 پیکسل
می‌بینید که ظاهرش خیلی فرق می‌کنه.
بیایم یه ذره کوچیک‌ترش کنیم.
آره، پس وقتی برای این کانتینر ارتفاع تعیین کردیم
یه عالمه فضای خالی اضافه شد که الان میشه پر بشه
با این دو تا واحد کسری، درسته؟
و مثل قبل
میتونیم این یکی رو بلندتر کنیم
یعنی دو برابر بلندتر، با دادن دو برابر fraction بهش.
خب، برش گردونیم به حالت قبل.
و معمولاً واحد fr روی ستون‌ها کاربردی‌تره
باشه؟ پس در واقع تو خیلی از موقعیت‌ها
کافیه فقط ستون‌ها رو تعریف کنیم
و ردیف‌ها خودشون به صورت خودکار پر میشن.
یه نکته آخر هم اینکه
کلمه‌ی کلیدی auto برای ردیف‌ها هم وجود داره.
پس الان فقط فضایی رو می‌گیره که نیاز داره
و بقیه فضای خالی به طور خودکار پر میشه
توسط این یکی.
یعنی همین اولین ردیف که واحد کسری داره.
خب، و با این توضیحات شما در واقع خیلی از
مهم‌ترین اصول پایه‌ای CSS Grid رو یاد گرفتید.
پس با همینا می‌تونیم شبکه‌های خیلی کاربردی بسازیم
توی دنیای واقعی.
ولی بیاید یک قدم دیگه جلو بریم
توی درس بعدی یاد بگیریم چطور آیتم‌های Grid رو به صورت دستی
داخل کانتینر Grid جایگذاری کنیم یا گسترده‌ترشون کنیم.