وجود یک نظم در عناصر یک صفحه، لازم و ضروری است. رسیدن به این دستاورد باعث میشود تا کاربران ما بتوانند اهمیت یک موضوع را در مقایسه با سایرین بسنجند و پیدا کردن یک عنصر برای آن ها به کار ساده تری تبدیل شود. برای چیدمان المان های یک صفحه از ماژول هایی (افزونه هایی) مانند CSS Grid و Flex Box استفاده می شود. در این نوشته قصد داریم تا مقدمات CSS Grid را به شکل کامل و مختصر آموزش دهیم.
تفاوت بین CSS Grid و Flex Box چیست؟
دریافت تفاوتی که بین این دو ماژول(افزونه) وجود دارد، کار بسیار ساده ای است. در Flex Box، میتوانیم عناصر را در یکی از محورهای افق یا عمود مرتب کنیم اما در CSS Grid قادر هستیم که همزمان در هر دو محور به صفحه آرایی اقدام نماییم. تصویر زیر به شما کمک میکند تا به درک بهتری نسبت به تفاوت این دو ماژول(افزونه) برسید.
بهتر است بدون اتلاف وقت به سراغ یادگیری مقدمات CSS Grid برویم. با مشاهده نتیجه کارمان شروع خواهیم کرد. در این نوشته قصد داریم تا با استفاده از CSS Grid به صفحه ای با این چهره برسیم:
در ابتدا به سراغ HTML می رویم و 7 آیتم را با کمک div تعریف می کنیم. تمام divها درون یک بخش بزرگتر به نام Container قرار میگیرند.
همانطور که مشاهده میکنید؛ اولین خروجی ما هیچ شباهتی با نتیجه ای که در نظر داریم ندارد:
بهتر است برای هرکدام از Itemها یک Background-Color تعریف کنیم تا به خوبی دیده شوند. پس به سراغ فایل CSS میرویم و کد زیر را اضافه میکنیم:
بعد از انجام این کار، خواهید دید که عناصر صفحه(آیتم ها) در زیر یکدیگر قرار گرفته اند و عرضی برابر با عرض نمایشگر دارند.
حالا زمان آن رسیده است که با یادگیری CSS Grid، آیتم ها را به شکل یک جدول با 3 ستون و 4 ردیف تبدیل کنیم.
چگونه CSS Grid را اضافه کنیم؟
ما قصد داریم CSS Grid را به Container اضافه کنیم تا بتوانیم آیتم های موجود در آن را نظم بدهیم. برای این کار به شکل زیر عمل میکنیم:
نوشتن این کد، چیزی را به خروجی اضافه نمیکند و برای دیدن کوچکترین دستاورد نیز کافی نیست. زمان آن رسیده است که یاد بگیریم چگونه بعد از اعمال نمایش به صورت گرید، عناصر خود را در ردیف ها (rows) و ستون ها(columns) جا دهیم.
چگونه بگوییم چند سطر و چند ستون؟
برای مشخص کردن تعداد و اندازه ستون ها از "grid-template-columns" و برای تعیین تعداد و سایز ردیف ها از "grid-template-rows" استفاده میکنیم. ما میتوانیم سایز هر ستون یا ردیف را با واحدهای اندازه گیری (مثل px، % و...) مشخص کنیم. اگر بخواهیم چند ستون یا ردیف با اندازه یکسان داشته باشی میتوانیم از repeat استفاده کنیم.
یکی از مهم ترین واحدهای اندازه گیری، "fr" است که به ما کمک میکند تا فضای خود را به قسمت های مساوی تقسیم کنیم.
بیایید با دیدن چند مثال به همراه تغییراتی که به وجود می آورند، مفهوم این بخش را بهتر یاد بگیریم:
توجه داشته باشید با وجود این که ما 4 ردیف(row) تعریف کردیم اما تعداد آیتم های ما برای پر کردن 12 خانه(3*4)، کافی نیست. بنابراین یک فضای خالی در زیر خروجی به جای ردیف چهارم که غایب است مشاهده میکنید. در مثال اول، 100 پیکسل و در مثال دوم، 1/4 صفحه به ردیف چهارم تعلق دارد.
فاصله هایی که بین آیتم ها میبینید در حالت default وجود ندارد. ایجاد این فاصله ها مبحثی است که اکنون میخواهیم یاد بگیریم. مبحثی که برای تفکیک عناصر صفحه به آن احتیاج خواهیم داشت.
چگونه بین آیتم ها، فاصله ایجاد کنیم؟
این کار را با اضافه کردن grid-gap انجام میدهیم. بدون اضافه کردن این قطعه، صفحه ما به شکل زیر نمایش داده میشود:
اما با اضافه کردن grid-gap میتوانیم عناصر را یه صورت افقی و عمودی تفکیک کنیم:
دیگر تفاوتی که بین هدف و نتیجه فعلی وجود دارد، اندازه آیتم هاست. حالا باید یاد بگیریم چگونه یک آیتم را به اندازه چند ستون یا ردیف، بزرگ کنیم.
چگونه اندازه آیتم ها را تغییر دهیم؟
در ابتدا باید توانایی تشخیص و شمارش خطوطی که بین آیتم ها وجود دارد را بهخ دست آوریم. برای این کار به تصویر زیر نگاه کنید:
حالا میخواهیم بگوییم که آیتم 4 باید به اندازه دو خانه در ردیف دوم جا بگیرد. بنابراین آیتم 4 از line 1 قرمز(عمودی یا column) شروع میشود و تا line 3 قرمز(عمودی یا column) ادامه پیدا میکند.
در فایل CSS، آیتم 4 را انتخاب(select) میکنیم و با نوشتن کدهای زیر، اندازه آن را تغییر میدهیم:
نتیجه چیزی نیست جز:
به همین شکل اندازه آیتم های 6 و 7 را نیز از نظر افقی و عمودی تغییر میدهیم:
تا اینجا درمورد مفاهیم اولیه و مبانی CSS Grid آموختیم. یاد گرفتیم که:
اما CSS Grid به این نکات خلاصه نمیشود. تعیین موقعیت یک آیتم در صفحه، جابجایی آیتم های جدول با یکدیگر، همپوشانی آیتم ها و... تنها گوشه ای از کاربردهای وسیع این ماژول(افزونه) است که یادگیری آن ها مزیت های بسیار زیادی به همراه دارد.
