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

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:

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

 

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

.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;
}
مشاهده مثال

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

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط