CSS Grid با توجه به ماهیت چهار گوش صفحات وب در تعادل و طراحی صفحات وب بسیار موثر و کاربردی است. یکی از مهم ترین اصول در طراحی، وجود تعادل است. تعادل به معنای توزیع متناسب اجزاء سنگین و سبک در یک صفحه است. منظور از سنگینی و سبکی در اینجا ماهیت سنگین و سبک اجزاء هستند به طوری که اجزاء بزرگتر و تیره تر، بسیار سنگین تر و اجزاء کوچک تر و روشن تر، سبک تر به نظر می رسند. قانون تعادل به ما نشان می‌دهد که چگونه یک صفحه همراه با تعادل داشته باشیم. یکی از ساده ترین و اصولی ترین روش‌ها برای ایجاد تعادل در طراحی، استفاده از ( Grid ) برای ایجاد یک تعادل و چینش متوازن و متناسب در طراحی است.
ماژول CSS Grid یک ابزار فوق العاده برای ایجاد مدل های وب سایت است. CSS Grid یکی از الزامات در طراحی وب سایت ها به حساب می آید و ماژول CSS Grid یکی از قدرتمند ترین و ساده ترین ابزارها برای ایجاد چنین طرح بندی هایی است. این روش بسیار بهتر از ابزاری نظیر بوت استرپ است.
در این مقاله به شرح CSS Grid و نحوه استفاده از ویژگی های مختلف آن برای طراحی سایت پرداخته ایم که نتیجه استفاده از آن به صورت عملی نشان داده شده است.
در مرحله اول به یک container و آیتم های آن نیاز داریم. CSS GRID می تواند در هر دو جهت حرکت کند اما به طور پیش فرض آن را در ردیف (ROW) قرار می دهیم. این یعنی اگر همه پیش فرض های دیگر دست نخورده باشند، آیتم های شما به طور خودکار یک ردیف (ROW) را به کار می اندازند که هر آیتم عرضش را از اجزای container درون GRID به ارث می برد. آیتم هایی که درون container قرار می گیرند شامل: هدر، منو، محتوای اصلی و فوتر هستند.
تنظیمات پایه در CSS
بعد از آن باید grid را تنظیم کنیم و مشخص کنیم که به چه تعداد ردیف و ستون نیاز داریم. CSS برای انجام این کار به صورت زیر است:
Grid-template-columns :
مقدار نوشته شده در بالا، دوازده ستون در grid ایجاد می کند که اندازه هرکدام از آن‌ها ۱۲/۱ است.
Grid-template-rows :
مقادیر نوشته شده در تصویر بالا، سه ردیف ایجاد می کنند که اولین ردیف ۵۰ پیکسل، دومین ۳۵۰ پیکسل و سومین آن ها ۵۰ پیکسل است. برای فاصله انداختن بین ستون و سطرها از تکه کد grid-gap استفاده می شود.
افزودن grid-template-areas
با خصوصیت grid-template-areas می توان ناحیه داخلی گرید را برای جای‌گذاری المان ها مشخص کرد.
جای‌گذاری آیتم ها در ناحیه مشخص
برای این کار باید با استفاده از خصوصیت grid-area آیتم ها را به ناحیه مورد نظر در grid متصل کنیم. به هدر ناحیه h، به منو ناحیه m، به محتوای اصلی ناحیه c و به فوتر ناحیه f را می دهیم.
که نتیجه آن برابر با طرح زیر است:
با استفاده از این چند خصوصیت به راحتی ناحیه مورد نظر ایجاد شد. چند خصوصیت مهم css grid به شرح زیر هستند:
grid-column-start :
این ویژگی مشخص می کند که ستون مورد نظر از کجا شروع شود.
grid-column-end :
این ویژگی مشخص می کند که ستون به چه اندازه باشد یا در کجا پایان یابد.
با نوشتن تکه کد بالا برای فوتر و هدر نتیجه زیر به دست می آید:
grid-auto-flow: column :
با این ویژگی آیتم ها در ستون ها چیدمان می شوند و ستون ها را پر می کنند.
که نتیجه آن مطابق زیر است:
grid-auto-flow: row :
با این ویژگی آیتم ها در سطرها چیدمان می شوند و سطر ها را پر می کنند.
نتیجه این تکه کد به شکل زیر است:
حالت ریسپانسیو
برای نمایش ریسپانسیو صفحه خود، بدون تغییر در فایل HTML می توانید به راحتی تکه کد زیر را بنویسید:
نتیجه تکه کد بالا به صورت زیر قابل نمایش است:
grid-template-columns:repeat() :
با استفاده از این ویژگی می توان یک الگو خاص برای چیدمان ستون ها به کار برد. :repeat() بر روی سطر ها هم قابل پیاده سازی است.
ترتیب آیتم های گرید
با استفاده از ویژگی order می توان ترتیب نمایش آیتم ها را جا به جا کرد. برای مثال با دادن order:-1 به فوتر ترتیب نمایش فوتر و هدر با هم عوض می شود.
