مفهوم grid در طراحی صفحات رسپانسیو وب

گرید یا grid در صفحات وب چیه؟ امروزه صفحات وب به صورت رسپانسیو ساخته میشن , اگه با مفهموم رسپانسیو بودن اشنا نیستید بدونید که صفحات رسپانسیو توی مانیتورهای با اندازه مختلف خودشون رو تغییر میدن و به یک صورت متفاوت نمایش داده میشن. مثلا یک وب سایت توی صفحه کامپیوتر شما به یک صورت نمایش داده میشه و توی صفحه ی موبایل شما به صورت دیگر نمایش داده میشه.

یکی از تکنیک های ساختن صفحات وب تقسیم کردن صفحه ی سایت به ستون های مختلف است. مثلا ما میتونیم صفحه ی سایت خودمون رو به ۱۲ ستون به صورت زیر تقسیم کنیم:

gridبه تصویر بالا دقت کنید , تصویر بالا صفحه ی وب ما است که اون رو به ۱۲ ستون با اندازه های مساوی تقسیم کردیم 😀 به هرکدوم از این ستون ها به اصطلاح grid یا گرید می گویند , پس تا اینجا با مفهوم گرید اشنا شدید .

حالا هدف ما از تقسیم صفحه ی وب به ستون های مختلف یا به اصطلاح هدف از ایجاد گرید یا grid چیه؟ میگن یه تصویر خوب گویا تر از صدها کلمه است 😀 پس به تصویر زیر نگاه کنید:

grid_how_to_useدر تصویر بالا یه بخش هایی رو به صورت رنگی میبینید(رنگ ابی و بنفش) , این قسمت های رنگی رو اگه به صورت بخش های مختلف صفحه در نظر بگیرید مثلا هر کدوم از این بخش های رنگی یه تگ div باشند , در حالت گرید (grid) ما میتونیم عرض المان ها یا قسمت های مختلف صفحه خودمون رو بر اساس گرید مشخص کنیم . مثلا عرض یه بخش از صفحه برابر با ۳ گرید باشه (قسمت ابی رنگ سمت راست تصویر بالا) یا اینکه عرض تگ div ما برابر با ۱۲ گرید باشه (قسمت بنفش رنگ در تصویر بالا).

در هنگامی که صفحه خودمون رو به گرید تقسیم میکنیم به جای اینکه بیایم برای قسمت های مختلف صفحه سایز بر اساس پیکسل مشخص کنیم, میایم و عرض گرید خودمون رو به قسمت های مختلف میدیم 😀 بازم به تصویر دقت کنید :

gridsystemامیدوارم منظورمو متوجه شده باشید. دوستانی که سوال دارند میتونن از بخش نظرات پایین همین پست مطرح کنند تا پاسخ بدیم. موفق باشیدددد.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟