آشنایی کامل با گرید بندی صفحات وب و بررسی اهمیت گرید بندی در طراحی

گرید چیست ؟

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

این اسکلت بندی خطوط نامرئی افقی و عمودی هستند و طراح عناصر هر بخش رو روی این خطوط قرار میدهد تا در نهایت یک سیستم یکپارچه تولید کند. درواقع گرید ها راهنمای طراحان برای ایجاد و ساخت یک طراحی پیچیده و پر المان هستند. در طراحی واکنش گرا و ریسپانسیو نمایش درست اجزا در تمام اندازه ها و تمام دستگاه ها اهمیت بالایی دارد با استفاده از سیستم گرید میتوانیم عرض صفحه وب خود را به 12 قسمت مساوی تقسیم کنیم و ابعاد هر ستون را معین کنیم تا المان مد نظر ما در بخش مورد نظر و اندازه دلخواه به نمایش دراید.

این ماژول به توسعه دهندگان این امکان را میدهد تا طراحی های ریسپانسیو و واکنش گرا را تا حد امکان ساده تر اجرا کنند.

البته بجز گرید سیستم های دیگری برای اجرای طرح های پیچیده و رسپانسیو وجود دارد مانند : Box model,CSS flexbox,tables

هر یک از این سیستم ها دارای خاصیت خاص خود میباشد.

🤩 مقاله پیشنهادی : همه چیز در مورد فریم ورک ! 🤩

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

معرفی بهترین فریم ورک 2023 ..

ویژگی های اساسی grid در طراحــــــی سایت

تشکیل ساختاری منظم و ترتیب بندی اجزای صفحه وب
ایجاد قابلیت تغیر موقعیت و اندازه باکس ها با استفاده از خصوصیات گرید
ایجاد سیستم قالب بندی برای اجرای طرح های پیچیده
امکان تغییر موقعیت و سایز باکس ها با پیروی از خصوصیات گرید

گرید ها یک استاندارد وب نیستند اما از سال 2017 مرورگر های فایرفاکس ، کروم ،سافاری ، اپرا و edge تماما از CSS grid پشتیبانی میکند و W3C استفاده از آن را توصیه میکند.

💡 W3C مسولیت تدوین استانداردهای جدید وب می باشد.

مزایای استفاده از CSS grid

ایجاد طرح بندی های منعطف و نامتقارن نسبت به ابزار های پیش تر مانند position,float .

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

ایجاد اندازه های ثابت و قابلیت تعیین محل المان ها و کنترل ترازبندی و پشتیبانی از همپوشانی.

این سیستم برخورد المان های مختلف را نیز کنترل میکند.

نحوه ی ایجـاد CSS grid

1.بعنوان مثال قصد ایجاد 20 باکس برای نمایش تصاویر دارید:

2.ابتدا ابتدا یک div به عنوان کانتینر ایجاد کرده div.container

3.سپس 20عدد div برای هرکدام از تصاویر ایجاد میکنیم .

4.سپس مقدار display کانتیر را مقدار grid قرار میدهیم .

5.حال تمام تصاویر قابلیت چیدمان شبکه ایی (grid) را به ارث میبرد.

6.با استفاده از ویژگی های

grid-template-rows

grid-template-columns

میتوان به مشخص کردن تعداد سطر و ستون مورد نظر پرداخت ...

<head>
<style>
    .container{
      display:grid;
      grid-template-columns: repeat(4,150px);
      grid-template-rows: repeat(2,150px);
     }
</style>

<body>
    <div class="img-holder"><img src="" alt=""></div>
    <div class="img-holder"><img src="" alt=""></div>
    <div class="img-holder"><img src="" alt=""></div>
    <div class="img-holder"><img src="" alt=""></div>
    <div class="img-holder"><img src="" alt=""></div>
    <div class="img-holder"><img src="" alt=""></div>
    <div class="img-holder"><img src="" alt=""></div>
    <div class="img-holder"><img src="" alt=""></div>
</body>

تفاوت CSS grid با flexbox

بهتر است برای ایجاد المان های تک بعدی (در راستای محور طول ها ) از flexbox استفاده کنیم تا مقدار کمتری کد نوشته شود زیرا برای تعیین عناصر در دوبعد نیاز به تنظیمات و کد های بیشتری در flexboxداریم در مقابل برای طراحی عناصر 2 بعدی در راستای طول و عرض از CSS grid استفاده میکنیم زیرا گرید قابلیت مشخص کردن سطر و ستون را دارد و میتوانیم موقعیت قرار گیری المان را مشخص کنیم.

بطور کلی برای طراحی ریسپانسیو از هر دو قابلیت flexbox , CSS grid استفاده میشود اما نکته مهم استفاده از قابلیتی است که برای المان بهترین کارایی را داشته باشد و مقدار کد کمتری برای طراحی نوشته شود .

موقعیت‌یابی قابلیت مهـــــــــــــــــــــم CSS grid

با استفاده از grid-template-areas

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

بعنوان مثال)

اگر 6 ستون داشته باشیم و نام ستون اول تا سوم خود را boxes fبگزاریم سپس به یکی از آیتم های درون containerویژگی grid-area را اضافه میکنیم و مقدار آن را برابر با boxes قرار میدهیم سپس آیتم مدنظر ما سه ستون را اشغال میکند.

اصول مهم در طراحی گرید ها

پیروی از قانون یک سوم و طرح بندی متعادل و مناسب شبکه :

در این قانون صفحه را به سه قسمت در جهت عمودی و افقی تقسیم میکنیم در نهایت 9 بخش کلی داریم و با این تقسیم بندی مشخص میکنیم مهم ترین عناصر در کدام بخش به نمایش دراید.

نسبت طلایی:

تقسیم فضای افقی به صورت متناسب .

تعیین اندازه ها در یک حالت تعادلی بعنوان مثال یک مستطیل طول آن 1.618 برابر عرضش خواهد بود .

در این قانون فضا ها به صورت تعادلی ایجاد میگردد و المان هایی که اهمیت بالا تری دارند در موقعیتی قرار میگیرند تا توجه بیشتری جلب نمایند.

فضای سفید یک قانون مهم در طراحی:

برای بالا بردن خوانایی متن ها و دیده شدن بخش هایی با درجه اهمیت بالا تر و سلسله مراتب اطلاعاتی ایجاد فضای سفید در طراحی گرید اولیه اهمیت بسیار بسیار بالایی خواهد داشت پس ایجاد فاصله سفید بین ستون ها وردیف ها بسیارتاثیر گزار خواهد بود.

شبکه گریدمی تواند المان های مختلف سایت شمارا به صورت موثری به هم مرتبط کنند. یک محور قوی می تواند کاربر را به جهت یابی و هدایت مناسب جهت دهد. در نهایت پیوند مناسبی بین سایت شما و کاربران ایجاد می شود.

گرید یکی از کاربردی ترین ویژگی های CSS میباشد که فریمورک های بزرگی نظیر Bootstrap و Tailwind CSS نیز بر پایه همین ویژگی پیاده سازی و ایجاد شده اند.