Real Time Web Analytics کانال تلگرام لرن روت

responsive

Responisve کردن سایت با استفاده از Grid

نویسنده : محمد مظفری
تاریخ انتشار:
23:03:48 1394-07-13
grid,responsive,css,html

نمایش Grid ( یا Grid-view ) چیست و چگونه می توان به کمک آن سایت خود را Responsive کرد. در این مقاله ما ابتدا به شرح و توضیح چگونگی ایجاد یک نمایش Grid می پردازیم و استفاده از آن را آموزش می دهیم و در مقالات بعدی نشان می دهیم که BootStrap چگونه از این قابلیت استفاده میکند. لطفا با لرن روت همراه باشید.

به کمک Grid می توان به سایت قابلیت Responsive داد اما در ابتدا باید بدانیم که نمایش Grid چیست ؟

نمایش Grid به معنای تقسیم کردن صفحه به ستون های مجزا می باشد.(مانند عکس زیر)

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

یک نمایش Grid به صورت  responsive اغلب دارای 12 ستون می باشد (مانند عکس بالا)، که در مجموع دارای عرض 100% می باشند و هنگام تغییر عرض به صورت خودکار تنظیم می شوند.

طراحی یک نمایش Grid به صورت Responsive

ابتدا باید در فایل CSS خود کد زیر را قرار دهیم:

* {
    box-sizing: border-box;
}

در اینجا برای browserها مشخص می کنیم که اندازه سایز boxها چه مقدار باید باشد. ( برای مطالعه بیشتر در مورد box-sizing می توانید به سایت W3schools مراجعه کنید)

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

100% / 12 columns = 8.33%

سپس برای همه ستون ها داریم:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

در اینجا ما مشخص می کنیم که فاصله هر box از سمت چپ (و یا سمت راست صفحه برای طراحی های RTL) صفحه چه اندازه باید باشد.

همچنین باید مشخص کنیم که تمام box ها باید در سمت چپ قرار بگیرند و هر کدام از ستون ها نیز باید یک فاصله مشخص تا متن درون خود داشته باشند؛

[class*="col-"] {
    float: left;
    padding: 15px;
}

بعد از مشخص کردن اندازه ستون ها باید تنظیمات boxی که این ستون ها در آن قرار می گیرد را نیز مشخص کنیم؛

.row:after {
    content: "";
    clear: both;
    display: block;
}

این دستور مشخص می کند که box کلی باید تا انتهای هر ستون را درون خود قرار دهد. (چون ما از float استفاده می کنیم ممکن است box کلی آن را در نظر نگیرد، برای فهمیدن بهتر این مطلب به box کلی یک رنگ پشت زمینه بدهید و سپس دستور بالا را قرار ندهید خواهید دید که ستون های شما از قالب کلی بیرون خواهد زد)

حال می توانیم از قالب responsive خود استفاده کنیم. مثال؛

 <div class="row">
  <div class="col-6">width of this column = 50%</div>
  <div class="col-4">width of this column = 33.33%</div>
  <div class="col-2">width of this column = 16.66%</div>
</div>

توجه داشته باشید که جمع اعداد ستون ها نباید بیشتر از 12 گردد و گرنه عرض طراحی شما بیش از 100% می شود.

برچسب ها:
مقالات مشابه