طراحی وب واکنش‌گرا - Grid-View

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


Grid-view چیست؟

بسیاری از وب‌سایت‌ها بر پایه یک grid-view هستند،که یعنی صفحه به ستون‌های متعدد تقسیم می‌شود:[۱]

استفاده از grid-view هنگام طراحی صفحات وب بسیار کاربردی است. موقعیت دهی عناصر روی صفحه را آسان می‌کند.

یک grid-view واکنش گرا اغلب ۱۲ ستون دارد، و عرض کل آن برابر با ۱۰۰٪ است، و هنگامی که اندازه پنجره مرورگر را تغییر ‌دهید کوچک و بزرگ خواهد شد.

واکنش‌گرایی در Grid View

ساخت یک Grid-View واکنش گرا

می خواهیم ساخت یک Grid-view واکنش گرا را شروع کنیم.

ابتدا مطمئن شوید که ویژگی box-sizing برای همه عناصر HTML روی border-box تنظیم شده‌است. این تضمین می کند که padding و کادر در مجموع عرض و ارتفاع عناصر لحاظ می‌شوند.

کد زیر را به CSS خود اضافه کنید:

* {
  box-sizing: border-box;
}


در مورد ویژگی box-sizing مطالب بیشتری را در فصل box sizing در CSS ما مطالعه کنید.

مثال زیر یک صفحه وب ساده واکنش گرا، با دو ستون را نشان می‌دهد:

مثال

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}


مثال بالا در صورتی صفحه وب تنها شامل دو ستون باشد خوب است.

اما، می‌خواهیم یک Gridview با ۱۲ ستون استفاده کنیم، تا کنترل بیشتری بر صفحه وب داشته باشیم.

بنابراین یک کلاس برای هر دوازده ستون می‌سازیم، class="col-" و عددی که مشخص ‌کند این بخش باید چه تعداد ستون را پوشش دهد:

CSS:

.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%;}


تمامی این ستون‌ها در سمت چپ قرار می‌گیرند، و padding ای به اندازه ۱۵ پیکسل دارند:

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


هر سطر می‌بایست درون یک <div> قرار بگیرد. تعداد ستون‌ها درون یک row همیشه باید حداکثر برابر با 12 باشد.

<div class="row">
  <div class="col-3">...</div> 
  <div class="col-9">...</div> 
</div>


ستون‌های درون یک سطر همگی در سمت چپ قرار می گیرند، و بنابراین از جریان صفحه خارج می‌شوند، و سایر عناصر جایگزین آنها خواهند شد بطوری که گویی ستون ها وجود ندارند. برای جلوگیری از این حالت، یک استایل اضافه می‌کنیم که جریان صفحه (Flow) را پاک می‌کند:

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


همچنین می‌خواهیم تعدادی استایل و رنگ به آن اضافه کنیم تا نمای بهتری داشته باشد:

مثال

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}


توجه کنید که صفحه وب در مثال هنگامی که شما اندازه پنجره مرورگر را به اندازه ای با عرض بسیار کوچک تغییر می‌دهد، خوب به نظر نمی‌رسد. در فصل بعدی یاد خواهید گرفت که چگونه این مشکل را رفع کنید.

منابع آموزشی