آموزش نوشتن یک Grid System اختصاصی برای خودمان
چگونه یک گرید سیستم بنویسیم؟ خیلی خوشحالم که با یه آموزش متنی بعد از مدت های زیاد در خدمتتون هستم. توی این آموزش نسبتا طولانی ولی شیرین می خوایم با هم یک GridSystem برای خودمون بنویسیم. اگه با مفهوم GridSystem آشنا نیستید و شکل کلی کار با اون رو بلد نیستید پیشنهاد می کنم ویدیو آموزشی کار با GridSystem در BootStrap رو ببیینید. (از این به بعد برای این که سخت نباشه به جای GridSystem از GS استفاده می کنم.)
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
نگاهی کلی به مفهوم GS
Grid System یا همون گرید سیستم یک استاندارد برای چینش المان های HTML در صفحاتمون هست. چینش المان ها در صفحات وب همیشه یکی از معزلات و همینطور پایه ای ترین کار های یک طراح وب هست. برای این کار در طول تاریخ طراحی وبسایت راهکار های مختلفی ارایه میشد. در ابتدا از جداول HTML استفاده می شد و بعد CSS Float ها وارد کار شدند ، بعد از اونها GridSystem خیلی باب شد و الان بحث های جدید Flex داره استفاده میشه ؛ اما همچنان GS یکی از متد های خوب و سریع برای اینکاره.
فریم ورک (Framework)های مختلفی GS توی خودشون استفاده می کنند که میشه گفت Twitter Bootstrap معروف ترین اونهاست . این فریم ورک ها خیلی جاها بهترین گزینه ی ما برای استفاده از یک GS هستند و می تونند خیلی کارامد باشند اما اگر ما بخواهیم کل فریم ورک رو استفاده کنیم فقط به خاطره یک GS کاری بیهودست پس ما می خوایم یک GS برای خودمون درست بکنیم تا داخله همه ی طراحی هایی که نیاز هست ازش استفاده بکنیم و همچنین مفهوم اون رو به طور عمیق درک بکنیم.
شروع درست کردن یک GridSystem اختصاصی
برای شروع ما باید تمامی المان هایی که در یک گرید سیستم با آنها سروکار داریم رو بشناسیم.
کل المان ها و فضا های GS ما در این چهار تا خلاصه میشه :
- المان Container : کار این المان دربرداشتن تمامی بخش های دیگه هست.
- المان Row : این المان داخل Container قرار میگیره و یک سطر از وبسایت ما رو تعیین می کنه. مثلا هدر یک وبسایت یا بخشی که یک ستون حاوی مطالب وبسایت و یک ستون کناری وبسایت رو در خودش قرار میده.
- المان Column : ستون ها (یا همون Column ها ) میزان عرض بخش های صفحه ی وبسایت ما رو تعیین می کنند . مثلا اگر من وبسایت رو از نظر عرضی به 20 ستون تقسیم بکنم می تونم هر دو المان 10 ستونه ویا یک المان 20 ستونه ویا 5 المان 4 ستون در یک سطر از اون قرار بدم.
- المان Gutter : حفره ها (Gutter ها ) همان Margin های بین ستون های ما هستند که عرض کوچکی از صفحه رو به خودشون اختصاص میدن ولی باید در محاسبه های ما در نظر گرفته بشن.
Container
Container در حقیق عرض کل GS ما رو در بر میگیره پس هر عرضی که برای Container در نظر بگیریم به عنوان عرض کل GS ما در نظر گرفته میشه. پس ما عرض Container رو 100% قرار میدیم که تمام صفحه رو پوشش بده همچنین یک عرض بیشینه هم برای اون درنظر می گیریم تا در صفحات خیلی بزرگ به مشکل بر نخوریم.
.grid-container {
width : 100%;
max-width : 1200px;
margin:0 auto;
}
Row
المان Row تعیین کننده ی جایگاه یک ستون است و از این که ستون داخل Row به حریم Row های دیگه تجاوز بکنه جلوگیری می کنه. برای این که اطمینان داشته باشیم که ستون های ما از Row خودشون بیرون نمیان از تکنیک ClearFix استفاده می کنیم. ( ClearFix یک پراپرتی Css برای جلوگیری این است که المان هایی که به آن ها Float نمی دهیم به دور المان Float دار جمع نشوند.)
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
Column
ستون های ما کار اصلی 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 بدم.
عرض دهی Column ها
حالا وقتش رسیده که تعیین کنیم ستون های وبسایت من هرکردوم چند درصد از عرض صفحه رو تشکیل بدن. قاعدتا وقتی من شش ستون دارم پس باید یک ستون یک ششم عرض صفحه و دو ستون دو ششم عرض صفحه و ... رو تشکیل بدن:
.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% یعنی کل عرض وبسایت رو در بر بگیرند.
- نکته : اگر من می خواستم صفحهم رو به 10 ستون تقسیم کنم عرض یک ستون رو 10% ، دو ستون رو 20% و ... در نظر می گرفتم تا همیشه جمع درصد های ستون های من در یک Row برابر عرض کاما یعنی 100% شود.
Gutters
حالا تنها بخش باقی مانده از 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 اضافه می کنیم به پیشرفتگی بعضی از فریم ورک ها نمیشه ولی تا حدی پاسخگوی نیاز های ما خواهند بود.
Reponsive
خب تا اینجا 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%; }
}
در اینجا هم برای تمامی ستون ها عرض کامل رو در نظر گرفتن به جز یک ستونه ها.
- نکته : در Media Query اول من عرض های کمتر از 800 و در دومی عرض های کمتر از 650 پیکسل رو تعیین کردم . از اونجایی که دومی رو بعد از اولی نوشتم پس تغیراتی که در دومی ایجاد کردیم باعث میشه در صفحه های کمتر از 650 پیکسل تغیرات اولی اعمال نیشه و در حقیقت Media Query اول تنها برای عرض های بین 650 تا 800 پیکسل اعمال می شود و دومی برای عرض های کمتر از 650.
حالا دیگه واقعا تبریک . 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>
با اضفافه کردن چند استایل برای نمایش بهتر صفحه ی من به شکل زیر در اومد :