طراحی ریسپانسیو وب – Grid-View

یادگیری CSS

تعداد بازدید : 5250

تاریخ و ساعت انتشار : یک شنبه 27 خرداد 1397 21:44

Grid-View چیست؟

بسیاری از صفحات وب مبتنی بر نمای شبکه هستند، به این معنی که صفحه به ستون تقسیم می شود:

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

یک شبکه نمایشی ریسپانسیو اغلب دارای 12 ستون است و دارای عرض کل 100٪ است و با تغییر اندازه پنجره مرورگر کوچک می شود و گسترش می یابد.

ساختن یک GridView ریسپانسیو

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

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

* {
box-sizing: border-box;
}

در بخش CSS درس اندازه جعبه (Box Sizing )بیشتر درباره مالکیت box-sizes اطلاعات بیشتری کسب کنید.

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

gridview

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

مشاهده مثال

مثال فوق خوب است اگر صفحه وب تنها شامل دو ستون باشد.
با این حال، ما می خواهیم از دیدگاه گرید ریسپانسیو با 12 ستون برای کنترل بیشتری بر صفحه وب استفاده کنیم.
ابتدا باید درصد یک ستون را محاسبه کنیم: 100٪ / 12 ستون = 8.33٪.

سپس ما یک کلاس برای هر یک از 12 ستون، class = "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:

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

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

ما همچنین می خواهیم بعضی از سبک ها و رنگ ها را اضافه کنیم تا بهتر شود.

استایل رنگ بندی gridview

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

مشاهده مثال

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

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما