۱۴
آبان

جلسه ۶۵ : استفاده از grid-view در CSS

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم. به بحث آموزش استفاده از grid-view در css بپردازیم. یکی از موضوعات مهم و پایه در Responsive کردن صفحات وب ، استفاده از ویژگی grid-view و تقسیم بندی قالب صفحه وب به چند ستون می باشد. این ویژگی با عق می شود در زمان کوچک تر کردن صفحه وب بخش هایی که خارج از viewport ، قرار می گیرند، بصورت ستونی در یک راستای عمودی منظم قرار بگیرند.

در مطالب قبلی آموزش css ، به موضوعات مهم و کاربردی نظیر کار با افکت های سایه در css ، کار با ویژگی Transitions در css و کار با ویژگی انیمیشن در css و افکت گذاری عکس ها در css برای افکت گذاری در صفحات وب پرداختیم.

همچنین در مبحث ایجاد قابلیت Responsive ، به موضوع آموزش استفاده از تنظیمات viewport در css ، پرداختیم. در ادامه آموزشهای css ما در بخش Responsive ، به موضوع استفاده از grid-view در css ، می پردازیم.

استفاده از grid-view در css

استفاده از تنظیمات grid-view در css

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

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

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

یک responsive grid-view ، معمولا دارای ۱۲ ستون است، و دارای عرض کاملا ۱۰۰ درصد است.

زمانیکه شما اندازه صفحه را تغییر دهید ، به همان نسبت کوچک تر و یا بزرگتر می شود.

ایجاد responsive grid-view در صفحات وب

ابتدا مطمئن شوید که تمام عناصر html موجود در صفحه وب شما دارای خصوصیت box-sizing با مقدار تنظیم شده ی border-box باشد.

این کار برای این است که اطمینان حاصل شود که عرض و ارتفاع تمام عناصر html دارای حد و مرز مشخص است. و کد آن در css به این صورت است:

مثال :

* {
    box-sizing: border-box;
}

* {

box-sizing: border-box;

}

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

مثال : یک طرح ساده GrideView

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

.menu {

width: 25%;

float: left;

}

.main {

width: 75%;

float: left;

}

خودتان امتحان کنید »

با این وجود ما از responsive grid-view با ۱۲ ستون استفاده می کنیم.

چراکه این ویژگی کنترل بیشتری را روی عناصر html در اختیار ما قرار می دهد.

ابتدا باید عرض صفحه وب را بین ۱۲ ستون بطور مساوی تقسیم کنیم، محاسبه آن به این صورت است :

۸٫۳۳ = ۱۲ / ۱۰۰ (عرض هر ستون باید ۸٫۳۳ درصد باشد).

سپس برای هر ۱۲ ستون یک کلاس با نام ” -col” ایجاد می کنیم. و سپس یک عدد برای تعیین تعداد ستون ها:

مثال : طراحی پایه ی grid view

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

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

خودتان امتحان کنید »

سپس در style تمام این ستون ها ، ویژگی های float: left و padding: ۱۵px را لحاظ می کنیم:

مثال :

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

[class*="col-"] {

float: left;

padding: 15px;

border: 1px solid red;

}

هر سطر باید در قالب تگ <div> تعریف شود. تعداد ستون های داخل یک ردیف همیشه باید تا ۱۲ عدد اضافه شود:

مثال :

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

</div>

استفاده از ویژگی float: left ممکن است در شرایطی باعث خارج شدن عناصر از نمایش درست شود.

برای جلوگیری از این اتفاق کد css زیر را اضافه کنید:

مثال :

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

.row::after {

content: "";

clear: both;

display: table;

}

همچنین می توانید کدهای css زیر را برای بهتر شدن نتیجه کار و زیباتر شدن ظاهر صفحه وب اضافه کنید:

مثال : یک مثال ساده از طراحی رسپانسیو

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

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;

}

خودتان امتحان کنید »

کلام آخر

با رشد و توسعه ی صفحه نمایش های بزرگ و کوچک نظیر موبایل، تبلت و … و استفاده از اینترنت و فضای مجازی در این دستگاه ها تکنیک رسپانسیو وب سایت ها ، برای نمایش بدون نقص در همه ی دستگاه ها ارائه شد، که یکی از موارد پایه و اصلی این تکنیک آشنایی با استفاده از grid-view در css است که در این مبحث به آن اشاره شد.

QR: جلسه ۶۵ : استفاده از grid-view در CSS

به اشتراک بگذارید

grid-view چیست ,responsive ,آموزش responsive ,استفاده از grid-view ,کاربرد grid-view

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۶۵ : استفاده از grid-view در CSS

مقدمه

استفاده از تنظیمات grid-view در css

ایجاد responsive grid-view در صفحات وب

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ