CSS – نمای شبکه‌ای واکنش‌گرا (RWD Grid View)

نمای شبکه‌ای چیست؟

بسیاری از صفحات وب بر اساس نمای شبکه‌ای طراحی می‌شوند که به این معنی است که صفحه به ستون‌هایی تقسیم می‌شود.

استفاده از نمای شبکه‌ای به طراحان وب کمک می‌کند تا به راحتی عناصر را در صفحه قرار دهند.

یک نمای شبکه‌ای واکنش‌گرا معمولاً دارای 12 ستون است و عرض کلی آن 100% است. این نمای شبکه‌ای با تغییر اندازه پنجره مرورگر به طور خودکار تغییر اندازه می‌دهد و سازگار می‌شود.

ساخت یک نمای شبکه‌ای واکنش‌گرا

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

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

* {
  box-sizing: border-box;
}

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

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

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

محاسبه درصد برای یک ستون

ابتدا باید درصد یک ستون را محاسبه کنیم:

100% / 12 ستون = 8.33%

سپس برای هر یک از ستون‌های 12گانه یک کلاس ایجاد می‌کنیم، به صورت col- و یک عدد که نشان می‌دهد آن بخش چند ستون را اشغال می‌کند:

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

تمامی این ستون‌ها باید به سمت چپ شناور باشند و پدینگ 15 پیکسل داشته باشند:

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

ساختار ردیف‌ها

هر ردیف باید در یک <div> پیچیده شود. تعداد ستون‌های موجود در هر ردیف باید همیشه مجموعاً 12 ستون باشد:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

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

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

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

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.