استفاده از CSS Grid برای پیاده سازی صفحات وب

استفاده از CSS Grid برای پیاده سازی صفحات وب

استفاده از CSS Grid برای پیاده سازی صفحات وب 1350 500 اسماء اصلاحی

CSS Grid با توجه به ماهیت چهار گوش صفحات وب در تعادل و طراحی صفحات وب بسیار موثر و کاربردی است. یکی از مهم ترین اصول در طراحی، وجود تعادل است. تعادل به معنای توزیع متناسب اجزاء سنگین و سبک در یک صفحه است. منظور از سنگینی و سبکی در اینجا ماهیت سنگین و سبک اجزاء هستند به طوری که اجزاء بزرگتر و تیره تر، بسیار سنگین تر و اجزاء کوچک تر و روشن تر، سبک تر به نظر می رسند. قانون تعادل به ما نشان می‌دهد که چگونه یک صفحه همراه با تعادل داشته باشیم. یکی از ساده ترین و اصولی ترین روش‌ها برای ایجاد تعادل در طراحی، استفاده از ( Grid ) برای ایجاد یک تعادل و چینش متوازن و متناسب در طراحی است.

ماژول CSS Grid یک ابزار فوق العاده برای ایجاد مدل های وب سایت است. CSS Grid یکی از الزامات در طراحی وب سایت ها به حساب می آید و ماژول CSS Grid یکی از قدرتمند ترین و ساده ترین ابزارها برای ایجاد چنین طرح بندی هایی است. این روش بسیار بهتر از ابزاری نظیر بوت استرپ است.

در این مقاله به شرح CSS Grid و نحوه استفاده از ویژگی های مختلف آن برای طراحی سایت پرداخته ایم که نتیجه استفاده از آن به صورت عملی نشان داده شده است.

در مرحله اول به یک container و آیتم های آن نیاز داریم. CSS GRID می تواند در هر دو جهت حرکت کند اما به طور پیش فرض آن را در ردیف (ROW) قرار می دهیم. این یعنی اگر همه پیش فرض های دیگر دست نخورده باشند، آیتم های شما به طور خودکار یک ردیف (ROW) را به کار می اندازند که هر آیتم عرضش را از اجزای container درون GRID به ارث می برد. آیتم هایی که درون container قرار می گیرند شامل: هدر، منو، محتوای اصلی و فوتر هستند.

css grid

 تنظیمات پایه در CSS

بعد از آن باید grid را تنظیم کنیم و مشخص کنیم که به چه تعداد ردیف و ستون نیاز داریم. CSS برای انجام این کار به صورت زیر است:

css grid

Grid-template-columns :

مقدار نوشته شده در بالا، دوازده ستون در grid ایجاد می کند که اندازه هرکدام از آن‌ها ۱۲/۱ است.

css grid

Grid-template-rows :

مقادیر نوشته شده در تصویر بالا، سه ردیف ایجاد می کنند که اولین ردیف ۵۰ پیکسل، دومین ۳۵۰ پیکسل و سومین آن ها ۵۰ پیکسل است. برای فاصله انداختن بین ستون و سطرها از تکه کد grid-gap استفاده می شود.

 

یکشنبه‌ها قبل از شروع کار یک مقاله رایگان از لابراتوار رسانه برای بهبود کسب و کار خود دریافت کنید

 

افزودن grid-template-areas

با خصوصیت grid-template-areas می توان ناحیه داخلی گرید را برای جای‌گذاری المان ها مشخص کرد.

css grid

 جای‌گذاری آیتم ها در ناحیه مشخص

برای این کار باید با استفاده از خصوصیت grid-area آیتم ها را به ناحیه مورد نظر در grid متصل کنیم. به هدر ناحیه h، به منو ناحیه m، به محتوای اصلی ناحیه c و به فوتر ناحیه f را می دهیم.

css grid

که نتیجه آن برابر با طرح زیر است:

css grid

با استفاده از این چند خصوصیت به راحتی ناحیه مورد نظر ایجاد شد. چند خصوصیت مهم css grid به شرح زیر هستند:

grid-column-start :

این ویژگی مشخص می کند که ستون مورد نظر از کجا شروع شود.

css grid

grid-column-end :

این ویژگی مشخص می کند که ستون به چه اندازه باشد یا در کجا پایان یابد.

css grid

با نوشتن تکه کد بالا برای فوتر و هدر نتیجه زیر به دست می آید:

css grid

grid-auto-flow: column :

با این ویژگی آیتم ها در ستون ها چیدمان می شوند و ستون ها را پر می کنند.

css grid

که نتیجه آن مطابق زیر است:

css grid

grid-auto-flow: row :

با این ویژگی آیتم ها در سطرها چیدمان می شوند و سطر ها را پر می کنند.

css grid

نتیجه این تکه کد به شکل زیر است:

css grid

حالت ریسپانسیو

برای نمایش ریسپانسیو صفحه خود، بدون تغییر در فایل HTML می توانید به راحتی تکه کد زیر را بنویسید:

css grid

نتیجه تکه کد بالا به صورت زیر قابل نمایش است:

css grid

grid-template-columns:repeat() :

با استفاده از این ویژگی می توان یک الگو خاص برای چیدمان ستون ها به کار برد. :repeat() بر روی سطر ها هم قابل پیاده سازی است.

css grid

css grid

ترتیب آیتم های گرید

با استفاده از ویژگی order می توان ترتیب نمایش آیتم ها را جا به جا کرد. برای مثال با دادن order:-1 به فوتر ترتیب نمایش فوتر و هدر با هم عوض می شود.

css grid

css grid

 

یکشنبه‌ها قبل از شروع کار یک مقاله رایگان از لابراتوار رسانه برای بهبود کسب و کار خود دریافت کنید

Subscribe for free resources and news updates.