چگونه یک گرید سیستم بنویسیم؟ خیلی خوشحالم که با یه آموزش متنی بعد از مدت های زیاد در خدمتتون هستم. توی این آموزش نسبتا طولانی ولی شیرین می خوایم با هم یک GridSystem برای خودمون بنویسیم. اگه با مفهوم GridSystem آشنا نیستید و شکل کلی کار با اون رو بلد نیستید پیشنهاد می کنم ویدیو آموزشی کار با GridSystem در BootStrap رو ببیینید. (از این به بعد برای این که سخت نباشه به جای GridSystem از GS استفاده می کنم.)
Grid System یا همون گرید سیستم یک استاندارد برای چینش المان های HTML در صفحاتمون هست. چینش المان ها در صفحات وب همیشه یکی از معزلات و همینطور پایه ای ترین کار های یک طراح وب هست. برای این کار در طول تاریخ طراحی وبسایت راهکار های مختلفی ارایه میشد. در ابتدا از جداول HTML استفاده می شد و بعد CSS Float ها وارد کار شدند ، بعد از اونها GridSystem خیلی باب شد و الان بحث های جدید Flex داره استفاده میشه ؛ اما همچنان GS یکی از متد های خوب و سریع برای اینکاره.
فریم ورک (Framework)های مختلفی GS توی خودشون استفاده می کنند که میشه گفت Twitter Bootstrap معروف ترین اونهاست . این فریم ورک ها خیلی جاها بهترین گزینه ی ما برای استفاده از یک GS هستند و می تونند خیلی کارامد باشند اما اگر ما بخواهیم کل فریم ورک رو استفاده کنیم فقط به خاطره یک GS کاری بیهودست پس ما می خوایم یک GS برای خودمون درست بکنیم تا داخله همه ی طراحی هایی که نیاز هست ازش استفاده بکنیم و همچنین مفهوم اون رو به طور عمیق درک بکنیم.
برای شروع ما باید تمامی المان هایی که در یک گرید سیستم با آنها سروکار داریم رو بشناسیم.
کل المان ها و فضا های GS ما در این چهار تا خلاصه میشه :
Container در حقیق عرض کل GS ما رو در بر میگیره پس هر عرضی که برای Container در نظر بگیریم به عنوان عرض کل GS ما در نظر گرفته میشه. پس ما عرض Container رو 100% قرار میدیم که تمام صفحه رو پوشش بده همچنین یک عرض بیشینه هم برای اون درنظر می گیریم تا در صفحات خیلی بزرگ به مشکل بر نخوریم.
.grid-container {
width : 100%;
max-width : 1200px;
margin:0 auto;
}
المان Row تعیین کننده ی جایگاه یک ستون است و از این که ستون داخل Row به حریم Row های دیگه تجاوز بکنه جلوگیری می کنه. برای این که اطمینان داشته باشیم که ستون های ما از Row خودشون بیرون نمیان از تکنیک ClearFix استفاده می کنیم. ( ClearFix یک پراپرتی Css برای جلوگیری این است که المان هایی که به آن ها Float نمی دهیم به دور المان Float دار جمع نشوند.)
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
ستون های ما کار اصلی GS رو انجام میدن اونها عرض هر المان رو تعیین می کنن. ما می تونیم صفحمون رو به هر تعدادی ستون که می خوایم تقسیم کنیم و بعد در زمان چینش صفحات و استفاده از GS تعیین کنیم که هر المان چه کسری از ستون های وبسایت ما باشد. ما در این آموزش یک GS شش ستونه درست می کنیم؛ بنابراین در زمان استفاده از این GS در یک وبسایت می تونیم یک المان 6 ستونه یا دو المان 3 ستونه یا یک المان 2 ستونه و یک المان 4 ستونه یا ... در یک Row داشته باشیم.
برای تعیین عرض هر ستون کلاس هایی در تعریف می کنیم که در زمان استفاده از GS بتونیم عرض المان هارو به راحتی تعیین کنیم. به این شکل که کلاس هایی از col-1 تا col-6 تعریف می کنیم. حالا اگر به یک المان کلاس col-1 بدهیم یعنی یک ستون از شش ستون اون Row به اون المان اختصاص داده میشه و اگر col-6 بدیم شش ستون و ...
[class*='col-'] {
float: right;
min-height: 1px;
}
در کد بالا من با یک Selector پیشرفته تعیین کردم که همه ی کلاس هایی که با col- شروع می شون که در حقیقت همون کلاس های ستون های من هستند Float برای آنان تعیین بشه تا از سمت راست کنار هم قرار بگیرند. همچنین یک ارتفاع کمینه داشته باشند.نکته : اگر GS من راست به چپ باشه باید Float رو Right بدم و اگر از چپ به راست باشه باید Left بدم.
حالا وقتش رسیده که تعیین کنیم ستون های وبسایت من هرکردوم چند درصد از عرض صفحه رو تشکیل بدن. قاعدتا وقتی من شش ستون دارم پس باید یک ستون یک ششم عرض صفحه و دو ستون دو ششم عرض صفحه و ... رو تشکیل بدن:
.col-1{
width: 16.66%;
}
.col-2{
width: 33.33%;
}
.col-3{
width: 50%;
}
.col-4{
width: 66.664%;
}
.col-5{
width: 83.33%;
}
.col-6{
width: 100%;
}
در قسمت بالا من تعیین کردم که المان های یک ستونه به اندازه ی 16.66 % که یعنی یک ششم صفحه است عرض داشته باشند و به همین ترتیب المان های شش ستونه 100% یعنی کل عرض وبسایت رو در بر بگیرند.
حالا تنها بخش باقی مانده از GS من همان فاصله ی بین ستون هاست. اگر دقت کرده باشید من عرض ستون هارو طوری در نظر گرفتیم که جمع آنها 100% می شه پس جایی برای فاصله ی ستون ها باقی نگذاشتیم و همونطور که میدونید Padding های یک المان به عرض اون اضافه میشه پس ما اگر برای فاصله دادن به المان ها از Padding استفاده بکنیم عرض تهایی ستون های ما بیشتر از 100% خواهد بود پس صفحه ی ما به هم میریزه. راه حل اینه که ما کاری کنیم که Padding های المان های GS ما به عرض اونها اضافه نشه بلکه از عرض المان ها کم بشه و به Padding اضافه بشه تا در نهایت عرض نهایی اونها همون عرض تعیین شده باشه و عرض کل صفحه ی ما 100% بشه.برای این کار کافیه که پراپرتی زیر رو به تمامی المان های داخل Container خودمون نسبت بدیم :
.grid-container *{
box-sizing: border-box;
}
از حالا به بعد برای المان هایی که داخل Container ما قرار دارند Padding به صورت جدا از عرض المان حساب نمیشه و ما هرچقدر Padding بدیم از عرض کم و به Padding اضافه میشه تا در نهایت عرض المان عرض مشخص شده باشه.تبریک میگم الان GridSystem ما آمادست و می تونیم از اون استفاده بکنیم . اما یه مشکلی وجود داره ، الان اگر از این GS در وبسایت های خودمون استفاده بکنیم وبسایت ما Responsive نخواهد بود و توی اندازه های مختلف صفحه ی نمایش ممکنه به هم بریزه! پس بهتره تغیرات کوچیکی توش بدیم تا توی همه ی صفحه نمایش ها به درستی نمایش داده بشه.دقت داشته باشید که کد هایی که ما برای Responsive بودن Gs اضافه می کنیم به پیشرفتگی بعضی از فریم ورک ها نمیشه ولی تا حدی پاسخگوی نیاز های ما خواهند بود.
خب تا اینجا GS ما برای همه ی صفحه نمایش ها به یه شکل خواهد بود اما ما می خوایم برای صفحات بین 650 تا 800 پیکسل و همینطور صفحات با عرض کمتر از 650 پیکسل مقداری متفاوت کار کنیم. پس Media Query زیر رو برای صفحات کمتر از 800 پیکسل اضافه می کنم :
@media all and (max-width:800px){
.col-1{ width: 33.33%; }
.col-2{ width: 50%; }
.col-3{ width: 83.33%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
.row .col-2:last-of-type{
width: 100%;
}
.row .col-5 ~ .col-1{
width: 100%;
}
}
در کد بالا ابتدا من عرض المان های بیشتر از سه ستون رو در عرض های برابر یا کمتر از 800 پیکسل برابر عرض کامل قرار دادم ( عرض هر ستون رو دو برابر کردم و اونهایی که بیشتر از 50% بودن رو برابر 100% قرار دادم.) ولی دو نکته رو نباید ازش بگذریم اولین نکته برای زمانی است که المان 2 ستونه در آخر قرار دارد که باید عرض اون 100% بشه وگر در سطری خالی قرار میگیره و عرض کامل نداره و حالت بد شکلی به وجود میاره.
نکته ی دوم برای زمانی اتفاق میفته که یک المان یه ستونه و یک المان پنج ستونه داریم که بازم چون المان پنج ستون عرض کامل میشه المان یک ستونه ی ما در یک سطر جدید قرار میگیره در حالی که فقط عرضش به اندازه ی یک سوم صفحس پس اونجا هم بهتره که عرض یک ستونه کامل بشه تا جلوه ی مرتب تری داشته باشیم. من با یک Slector پیشرفته تمامی یک ستونه هایی که کنار یک پنج ستونه قرار میگیرن رو انتخاب کردم و عرض اونها رو 100% قرار دادم. حالا نوبت عرض های بین کمتر از 650 رسیده که برای اونها هم مقداری تغیر بدیم.
@media all and (max-width:650px){
.col-1{ width: 50%; }
.col-2{ width: 100%; }
.col-3{ width: 100%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
}
در اینجا هم برای تمامی ستون ها عرض کامل رو در نظر گرفتن به جز یک ستونه ها.
حالا دیگه واقعا تبریک . GridSystem ساده ی ما آماده ی استفادست و همینطور شما قادر هستید GridSystem هایی با تعداد ستون های مختلف برای خودتون درست کنید.برای مثال من یک صفحه ی ساده با این GS درست می کنم :
<div class="grid-container outline">
<div class="row">
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
<div class="row">
<div class="col-4"><p>col-4</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-5"><p>col-5</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-6"><p>col-6</p></div>
</div>
</div>
با اضفافه کردن چند استایل برای نمایش بهتر صفحه ی من به شکل زیر در اومد :