امیدوارم آماده و هیجان‌زده باشید
برای شروع یادگیری CSS Grid
من که خیلی مشتاقم و واقعا نمی‌تونم صبر کنم
تا بالاخره CSS Grid رو بهتون نشون بدم
و برای شروع یادگیری CSS Grid
بهترین کار اینه که دوباره اون رو به‌صورت جداگانه تمرین کنیم
درست مثل کاری که با Flexbox انجام دادیم
که دیگه بهش نیازی نداریم
اینجا هم یک فایل شروع برای CSS Grid داریم
این فایل HTML همینجاست
که الان قراره ازش برای یاد گرفتن CSS Grid استفاده کنیم
و دوباره این فایل رو از قبل متصل کردیم
اینجا توی بخش navigation صفحه اصلی‌مون
اینجا داریم CSS Gridhtml
پس اگه بریم توی صفحه و روی اون کلیک کنیم
فایل شروع کارمون اینجاست
می‌بینید که اینجا در واقع دو تا container داریم
بذارید اینو بهتون نشون بدم
بله
اینجا container یک و container دو داریم
و اولی همینه که اینجاست
تقریباً با همون هشت عنصر HTML قبلی که داشتیم
همون‌ها
خب؟
فعلاً کاری با دومی نداشته باشید
بذارید اون یکی رو موقتاً خاموش کنیم
و برای این کار می‌تونیم از چیزی استفاده کنیم
که تا حالا امتحان نکردیم
بذارید یه چیز جدید نشونتون بدم
و اون خاصیت Display هست
و می‌تونیم مقدارش رو بذاریم None
با این کار اون container کلاً
از صفحه حذف می‌شه
درسته؟
خب حالا بیاید شروع کنیم
با CSS Grid روی همین container اول.
CSS Grid الان مدرن‌ترین روش ساختن layoutهاست
و در عین حال کامل‌ترین روش هم هست
و به نظر من حتی ساده‌ترین روش هم هست
برای ساخت layout حداقل اگه فقط
از اصول اولیه استفاده کنیم
و راه‌اندازی یک Grid ساده کمتر از یک دقیقه طول می‌کشه
پس سریع این کار رو انجام بدیم
مثل Flexbox اینجا هم Container داریم
و Item داریم
توی CSS Grid داریم Grid Container و Grid Item
پس منطقش خیلی شبیه به Flexbox هست
و Grid Container ما هم
همین container اولی خواهد بود
برای اینکه اینو توی کدمون تعریف کنیم
کافیه بنویسیم Display
و این بار مقدارش Grid هست نه Flex
خب
و همین کافیه
البته از نظر ظاهری فعلاً چیزی تغییر نکرده
چون حالا لازمه که بیایم تعریف کنیم
layout دو بعدی خودمون رو
یعنی همه ستون‌ها و همه ردیف‌ها
خب بیاید این کارو انجام بدیم
برای این کار از ویژگی‌ای استفاده می‌کنیم
به نام Grid.
Template.
Columns
اینجا می‌تونیم هر تعداد
مقدار عرضی که بخوایم تعریف کنیم
و برای هرکدوم از این مقادیر
یک ستون ساخته می‌شه
مثلاً بنویسیم ۲۵۰ پیکسل
و ۱۵۰ پیکسل
فقط همین دوتا مقدار
با این کد دوتا ستون ساخته می‌شه
یکی با عرض ۲۵۰ پیکسل
و یکی دیگه با عرض ۱۵۰ پیکسل
خب اینو ذخیره کنیم
و همونطور که می‌بینید درست شد
الان واقعاً دوتا ستون داریم
و اگه بررسی کنیم می‌بینیم که دقیقاً
عرض‌ها همونیه که خودمون مشخص کردیم
اینجا یه مقدار فضای بیشتری لازمه
این یکی ۱۵۰ هست و اون یکی ۲۵۰
و توی CSS Grid اگه visualization رو روشن کنیم
می‌تونیم چیزای خیلی بیشتری ببینیم
ولی بعداً راجع بهش می‌گم
به محض اینکه شروع به ساخت ستون کنیم
همه عناصر توی ستون‌ها و ردیف‌ها قرار می‌گیرن
و به تعداد لازم ردیف ساخته می‌شه
خب بیاید ستون‌های بیشتری اضافه کنیم
چرا که نه؟
مثلاً بخوایم یه Grid چهارتا در دوتا بسازیم
یعنی Grid با چهار ستون و دو ردیف
پس بیاید یه ستون دیگه اینجا اضافه کنیم
و یکی دیگه هم اضافه کنیم اینو بذاریم ۱۵۰
خب الان دیگه جا کم داریم
پس مثل قبل یکیشو یه مقدار کم می‌کنیم
و مثلاً اینو بذاریم ۲۰۰
ببینیم چی می‌شه
بیاید یه مقدار دیگه هم کمترش کنیم
و شاید اینا رو بذاریم ۱۰۰
اینطوری همه‌چیز واضح‌تر دیده می‌شه
ولی چیزی که اینجا مهمه اینه که
این Grid Itemها الان توی این چهارتا ستون قرار گرفتن
و به تعداد لازم هم ردیف ساخته شده
تا همه محتوا رو جا بده
پس اگه اینجا یه المان دیگه داشتیم
بگیم
مثل این
خب طبیعتاً یه ردیف جدید ساخته می‌شد
و اون آیتم جدید اونجا قرار می‌گرفت
و بقیه‌ی اینجا هم خالی می‌موند
اما فعلاً فقط برای این دمو همین‌جوری بذاریم بمونه
و بیاید یه چیز دیگه اینجا متوجه بشیم
که درست مثل فلکس‌باکس
المان‌ها کل سلول رو پر می‌کنن
یعنی در اصل کل ارتفاع
و عرضی که برای هر سلول تعریف کردیم
پس هر کدوم از این بخش‌ها اینجا
بین ستون‌ها و ردیف‌ها
یه مقدار بیشتر درباره‌ی این اصطلاحات
در واقع توی جلسه‌ی بعدی می‌گیم
اما چیزی که داشتم می‌گفتم اینه که
چون این المان اینجا ارتفاعش 150 هست
این سبزه
پس کل این ردیف اون ارتفاع رو خواهد داشت
یعنی برای اینکه اون ارتفاع جا بشه
همه‌ی این المان‌ها کشیده می‌شن
تا اون ردیف کامل پر بشه
پس اگه این وجود نداشت
اون ردیف فقط به اندازه‌ی محتوای این سلول بود
و این دقیقاً همون دلیلیه که این ردیف
در واقع فقط به اندازه‌ی همین سلول بلنده
یعنی همون آیتم گرید
خب؟
این حداقل رفتار پیش‌فرضه
اما طبیعتاً ما می‌تونیم ارتفاع ردیف‌ها رو هم تغییر بدیم
تا هرقدر که بخوایم بلند بشن
همون‌طور که ستون‌ها رو می‌تونیم
پس طبیعتاً ردیف‌ها رو هم می‌تونیم اندازه بدیم
خب Grid.
Template
و همون‌طور که حدس می‌زنید Rows
و بگیم می‌خوایم اولی 300 پیکسل ارتفاع داشته باشه
و دومی 200 پیکسل
ایده دقیقاً مثل ستون‌هاست
پس ردیف اول اینو می‌گیره
و دومی این ارتفاع رو می‌گیره
و حالا اگه ذخیره کنیم این شکلی می‌شه
و حالا این آیتم گرید اینجا
که ارتفاع تعریف‌شده‌ی 150 داره
دیگه کل این سلول رو پر نمی‌کنه
در حالی که بقیه آیتم‌های گرید کل سلول رو پر می‌کنن
همون‌طور که با رنگ‌ها می‌بینیم
خب؟
پس اینطوری یه گرید ساده می‌سازیم
در واقع همه چیزی که نیاز داریم ستون‌هاست
و اگه بخوایم ردیف‌ها رو هم تعریف کنیم
می‌تونیم با دادن یه ارتفاع مشخص این کارو بکنیم
خب؟
حالا فقط برای جمع‌بندی این جلسه
دقیقاً مثل فلکس‌باکس ما می‌تونیم توی گرید هم
GAP تعریف کنیم
و در واقع این تنها راهیه
برای تعریف فاصله بین آیتم‌های گرید
پس همیشه از GAP استفاده کنین و نه MARGIN
چون اون اصلاً کار نخواهد کرد
پس می‌تونیم از GAP استفاده کنیم
این ویژگی در واقع قبلاً Grid GAP نام داشت
اما اون پیشوند Grid رو حذف کردن
وقتی که GAP به فلکس‌باکس هم اضافه شد
پس الان فقط GAP نامیده می‌شه
ولی اگه یه جایی هنوز اون رو دیدید
بدونید که همونه دقیقاً
و تو مرورگرها هم کار می‌کنه
خب حالا بیایم یه GAP تعریف کنیم مثلاً 30 پیکسل
که دقیقاً همون کاریو می‌کنه که انتظار داریم
پس یه فاصله بین این المان‌ها ایجاد می‌کنه
هم بین ستون‌ها و هم ردیف‌ها
حالا چیزی که تو فلکس‌باکس نمی‌شه
ولی توی گرید می‌شه اینه که می‌تونیم
برای ستون‌ها و ردیف‌ها جداگانه مقدار بدیم
پس بیایم این کارو بکنیم
می‌تونیم بگیم فاصله ستون همچنان 30 باشه
پس اینو پاک کنیم
و بعد فاصله ردیف‌ها
باشه مثلاً دو برابر
یعنی 60 پیکسل
و حالا اگه ذخیره کنیم
می‌بینید یه فضای اضافی
اینجا ایجاد شده تا اون فاصله بزرگ‌تر جا بشه
و در نتیجه کل گرید یه مقدار بزرگ‌تر شد
و حالا اینجا فضای بیشتری داریم
خب؟
و این‌ها واقعاً اصول خیلی ابتدایی CSS Grid هستن
و مطمئنم همین الانم شروع کردین
به دیدن قدرت زیاد این تکنولوژی لایوت
پس فقط با همین پنج ویژگی
یه لایوت نسبتاً پیچیده ساختیم
حتی اگه ظاهرش شاید
خیلی پیچیده به نظر نرسه در واقع هست
و قدیما قبل از فلکس‌باکس و گرید
رسیدن به این خیلی سخت‌تر بود
پس CSS Grid واقعاً قدرتمنده
و این فقط سطح کاره
و تا آخر این بخش
یه مقدار بیشتر بررسی می‌کنیم
که دیگه چه کارایی می‌شه باهاش کرد