حالا که با برخی از اصول اولیه
CSS Grid در عمل آشنا شدی
بیایید کمی هم دربارهٔ تئوری آن یاد بگیریم
و درست مثل Flexbox
اولین سوالی که می‌پرسیم این است
CSS Grid واقعاً چیست؟
و در ساده‌ترین سطح
CSS Grid مجموعه‌ای از ویژگی‌های CSS است
که توسعه‌دهندگان وب می‌توانند برای ساخت
چیدمان‌های دو بعدی از آن استفاده کنند
وقتی CSS Grid برای اولین بار توسعه یافت و
چند سال پیش وارد مرورگرها شد
ایده اصلی پشت آن این بود که حالا می‌توانیم
یک عنصر کانتینر را به ردیف‌ها و ستون‌ها تقسیم کنیم
و سپس آن‌ها را با عناصر فرزندش پر کنیم
و کارهای زیادی اینجا ممکن است
مثل گسترده کردن عناصر در چند ردیف
و ستون‌ها همپوشانی عناصر مختلف و چیزهای دیگر
پس ما از CSS Grid در زمینه‌های دو بعدی استفاده می‌کنیم
که به ما اجازه می‌دهد نسبت به HTML کد کمتری بنویسیم
و همچنین CSS خواناتری داشته باشیم
و وقتی واقعاً شروع به استفاده از آن کنید
کم‌کم این ویژگی‌های CSS Grid را قدر خواهید دانست
و شاید آن را با چیزهایی مثل Flexbox
یا حتی چیدمان‌های Float مقایسه کنید
پس CSS Grid کاملاً نحوهٔ تصور و
ساخت چیدمان‌های دو بعدی با CSS را تغییر می‌دهد
و بنابراین می‌توان گفت که به نوعی
CSS Grid به طور کامل CSS را متحول کرده است
حالا یک تصور غلط رایج که بسیاری از مبتدیان دارند
این است که CSS Grid قرار است جایگزین Flexbox شود
اما واقعیت اینطور نیست
در عوض Flexbox و CSS Grid
به‌خوبی با هم کار می‌کنند
فقط کافی است آن‌ها را در موقعیت‌های متفاوت استفاده کنید
پس وقتی به یک چیدمان یک بعدی نیاز دارید
می‌توانید به سادگی از Flexbox استفاده کنید
اما اگر به یک چیدمان دو بعدی نیاز دارید
که معمولاً همان گرید است
می‌توانید از CSS Grid استفاده کنید
پس دوباره یکی جایگزین دیگری نمی‌شود بلکه
آن‌ها با هم به‌خوبی کار می‌کنند
حالا دوباره نیاز داریم که دربارهٔ
چند اصطلاح صحبت کنیم تا وقتی دربارهٔ CSS Grid حرف می‌زنم
همهٔ ما درک یکسانی داشته باشیم
پس همانطور که قبلاً یاد گرفتیم
grid container اساساً جایی است که همه چیز در آن اتفاق می‌افتد
و ما یک grid container با تنظیم ویژگی display آن به grid ایجاد می‌کنیم
درست است؟
سپس همهٔ عناصر فرزند grid container
به عنوان grid items خواهند بود
پس دوباره درست مثل چیزی که قبلاً یاد گرفتیم
و این بسیار شبیه به Flexbox است
درسته؟
همچنین مثل Flexbox
ما محور داریم
پس محور ردیف داریم
و محور ستون
حالا برخلاف Flexbox
نمی‌توانیم جهت محور ردیف و ستون را تغییر دهیم
که به نظر من در واقع باعث می‌شود
کار با CSS Grid کمی آسان‌تر باشد
خوب این اصطلاحات پایه‌ای
CSS Grid هستند
اما از آنجایی که چیدمان‌های دو بعدی
کمی پیچیده‌ترند
در واقع به اصطلاحات بیشتری نیاز داریم
تا واقعاً بفهمیم چه اتفاقی می‌افتد
پس بیایید چند اصطلاح دیگر را بررسی کنیم
این همان چیزی است که قبلاً دیدیم
اما حالا بیایید مفهوم
grid lines را معرفی کنیم که این خطوط هستند
که اساساً گریدها را تقسیم می‌کنند و
ستون‌ها و ردیف‌ها را جدا می‌کنند
و همانطور که می‌بینید
این خطوط شبکه از 1 شماره‌گذاری می‌شوند تا
تعداد ستون‌ها به اضافهٔ 1
و تعداد ردیف‌ها به اضافهٔ 1
پس اگر 3 ستون داشته باشیم 4 خط شبکه برای ستون‌ها داریم
برای ستون‌ها
و اگر 2 ردیف داشته باشیم 3 خط شبکه برای ردیف‌ها داریم
برای ردیف‌ها
و این اعداد در واقع مهم هستند
چون می‌توانیم از آن‌ها برای قرار دادن دقیق یک grid item
در یک مکان خاص در گرید استفاده کنیم
جایی که می‌خواهیم باشد
حالا تلاقی همه این خطوط شبکه
هم خطوط شبکه ستون‌ها و هم ردیف‌ها
تمام این فضاها را ایجاد می‌کند که
می‌توانیم آیتم‌ها را در آن‌ها قرار دهیم
و این فضاها به نام grid cells شناخته می‌شوند
باشه
پس grid cells همیشه ایجاد می‌شوند
اما همیشه لازم نیست پر شوند
پس در این مثال ما فقط 5 grid item داریم
اما هنوز هم 6 سلول وجود دارد
به سادگی چون این یک گرید با
3 ستون و 2 ردیف است
و پس 3x2 می‌شود 6
پس دوباره هر یک از این فضاها به نام
یک grid cell شناخته می‌شود
اما همیشه لازم نیست پر شود
توسط یک grid item
و همینطور لازم نیست که حتماً کامل پر بشن
خب بعدی همونطور که تو جلسه قبل دیدیم
ما می‌تونیم بین آیتم‌های گرید فاصله بسازیم
بین آیتم‌های گرید
و به این فاصله‌ها می‌گن gutters
یا gaps
پس یادت باشه برای این از ویژگی gap استفاده می‌کنیم
یا row-gap و column-gap
row-gap و column-gap
پس در واقع اسم فنی‌شون
gutters هست
اوکی؟
آخرش هم یه اصطلاح دیگه که زیاد استفاده می‌شه
وقتی درباره CSS Grid حرف می‌زنیم
اصطلاح grid track هست
grid track می‌تونه یه ردیف باشه یا
یه ستون
پس هر کدوم از اینا یه grid track حساب می‌شن
و توی این مثال اینجا ما داریم
۲ تا row track و
۳ تا column track
اوکی؟
ما بهشون می‌گیم track چون این مفاهیم
بیشتر مربوط به خود فضا هستن
نه به آیتم‌های گرید
یه کم شبیه grid cell
درسته؟
یادت باشه یه grid cell ممکنه با یه آیتم پر بشه
یا خالی بمونه
ولی چیزی که مهمه اینه که یه فضای تئوریک هست
یه فضای تئوریک
برای grid track هم همینطوره
اوکی ولی قول می‌دم دیگه اصطلاحات تموم شد
می‌دونم که اینا یه خورده زیاده
پس خیلی نگران این همه اصطلاح نباش
الان لازم نیست همه‌شون رو کامل حفظ باشی
با گذر زمان
خودش کم‌کم برات جا می‌افته
مخصوصاً چیزایی مثل grid cell grid lines
و همین gutters یا gaps
اینا اصطلاحات مهمی‌ان که ما قراره
همیشه ازشون استفاده کنیم
پس یه جایی می‌رسه که
خودت دیگه ناخودآگاه باهاشون آشنا می‌شی
خب حالا برای جمع‌بندی درست مثل
جلسه Flexbox
بیایم یه مرور کلی داشته باشیم
روی بعضی ویژگی‌هایی که می‌تونیم
روی grid container
و روی grid item استفاده کنیم
و شروع می‌کنیم با ویژگی‌های grid container
مهم‌ترین‌هاش grid-template-rows
grid-template-columns column-gap
و row-gap هستن؛ که با هم ویژگی gap رو می‌سازن
بعد هم justify-items و align-items هستن
که برای تراز کردن آیتم‌ها داخل
ردیف‌ها یا ستون‌ها استفاده می‌شن
یعنی به عبارت دیگه افقی و عمودی
مثل قبل من مقدار پیش‌فرض هر ویژگی رو نوشتم
و یه توضیح کوتاه هم دادم
فکر کنم خیلی مفید باشه
اگه این مرور کلی رو پرینت بگیری
یه جورایی مثل یه cheat sheet داشته باشی
که هر وقت شروع کردی
به نوشتن کدهای CSS Grid
کنارت دم دست باشه
اینجا دیگه همه این ویژگی‌ها رو یکی‌یکی مرور نمی‌کنم
چون معلومه که بعداً
توی عمل باهاشون کار می‌کنیم
ولی خب دو تا ویژگی کمتر مهم هم هستن
روی grid container به اسم
justify-content و align-content
اینا فقط وقتی کاربرد دارن که container
از خود گرید بزرگ‌تر باشه
پس معمولاً خیلی مهم نیستن
و همینجا بگم این مرور کلی
از ویژگی‌های CSS Grid همه رو شامل نمی‌شه
همه رو شامل نمی‌شه
در واقع کلی ویژگی دیگه برای CSS Grid وجود داره
ولی ما توی این دوره همه رو نمی‌گیم
چون برای کسی که تازه‌کار باشه خیلی گیج‌کننده می‌شه
این دوره باید برات راحت و قابل فهم باشه
به عنوان یه تازه‌کار توی CSS و به همین خاطر
نمی‌خوایم زیادی پیچیده‌ش کنیم
خب حالا برسیم به grid items
ما ویژگی‌های grid-column و grid-row رو داریم
که خیلی مهمن برای اینکه آیتم‌ها رو بذاریم توی
یه سلول مشخص
آخرش هم justify-self و align-self رو داریم
که امیدوارم از Flexbox یادت باشه
align-self برای override کردن align-items استفاده می‌شه و
justify-self برای override کردن justify-items استفاده می‌شه
فقط برای یه سلول خاص
فقط برای یه سلول خاص از grid
دقیقاً مثل چیزی که توی Flexbox داشتیم
پس این یه مرور کلی از مهم‌ترین ویژگی‌های
CSS Grid هست که قراره توی این دوره
باهاشون کار کنیم
پس مطمئن شو که اینو پرینت می‌گیری و
می‌ذاری کنار کیبوردت
وقتی که تو جلسه بعد شروع می‌کنیم به نوشتن کدها