Grid-View چیست؟

          برنامه نویس 
            بازدید : 34
          دوشنبه 24 تیر 1398
           نظرات (0)
        

Grid-View در CSS

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

ستون های فرضی در طراحی grid-view (این ستون ها و خط ها واقعا وجود ندارند، فرضی هستند)تفاوت تئوری صفحات طراحی شده با Grid

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

یک مثال پیشرفته از grid-view را ببینید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<style>
* {
  box-sizing:border-box;
}
 
.gridwrapper {
  overflow:auto;
  position:relative;
  height:250px;
}
 
.gridcontent {
  width:8.33%;
  margin:0;
  border-right:1pxsolidgrey;
  height:100%;
  float:left;
  background-color:#84c754;
  background-color:#f1f1f1;
}
</style>
</head>
<body>
 
<div style="position:absolute;opacity:0.9;width:auto;left:8px;right:10px;">
  <div>
    <div class="gridwrapper"style="height:90px;">
      <div class="gridcontent"style="width:100%;background:#9933cc;border-right-color:transparent;">
      </div>
    </div>
    <div class="gridwrapper"style="height:230px;">
      <div class="gridcontent"style="background-color:#ffffff;border:none;width:25%;padding-top:15px;">
        <div style="background-color:#33b5e5;border:none;width:100%;height:15%;margin-bottom:10px;"></div>
        <div style="background-color:#33b5e5;border:none;width:100%;height:15%;margin-bottom:10px;"></div>
        <div style="background-color:#33b5e5;border:none;width:100%;height:15%;margin-bottom:10px;"></div>
        <div style="background-color:#33b5e5;border:none;width:100%;height:15%;"></div>
      </div>
      <div class="gridcontent"style="background-color:#ffffff;border:none;"></div>
      <div class="gridcontent"style="background-color:#ffffff;border:none;"></div>
      <div class="gridcontent"style="background-color:#ffffff;border:none;"></div>
      <div class="gridcontent"style="background-color:#ffffff;border:none;"></div>
      <div class="gridcontent"style="background-color:#ffffff;border:none;"></div>
      <div class="gridcontent"style="background-color:#ffffff;border:none;"></div>
      <div class="gridcontent"style="background-color:#ffffff;border:none;width:25%;padding-top:15px;">
        <div style="background-color:#33b5e5;border:none;width:100%;height:92%;"></div>
      </div>
    </div>
    <div class="gridwrapper"style="height:50px;">
      <div class="gridcontent"style="width:100%;background:#0099cc;border-right-color:transparent;">
      </div>
    </div>
  </div>
</div>
 
<div style="opacity:0.1;">
  <div class="gridwrapper"style="height:370px;">
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;border-left:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
    <div class="gridcontent"style="background-color:#ffffff;border-right:1px solid #000000;"></div>
  </div>
</div>
 
<p>Resize the browser window tosee that thisgrid will respond tothe resizing,andalways use100%of the available space.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

مثال بالا یک grid-view واکنش گرا است که 12 ستون دارد و عرض آن نیز 100 درصد است. از آنجا که این grid-view واکنش گراست با کوچک و بزرگ شدن مرورگر، اندازه اش نیز تغییر می کند. نیازی نیست که کدهای آن را بررسی کنید، فقط ظاهر آن را ببینید تا با آن آشنا شوید.

نکته: اگر قسمت خروجی این مثال را بسیار کوچک کنید، می بینید که ظاهر جالبی پیدا نمی کند و 100 درصد واکنش گرا نیست. در قسمت بعدی این سری آموزشی درباره ی حل مشکلات آن از طریق media query ها صحبت خواهیم کرد.

ساخت grid-view واکنش گرا

اول از همه باید مطمئن شوید که خصوصیت box-sizing برای تمامی عناصر HTML روی border-box قرار دارد؛ این موضوع باعث می شود که padding ها و حاشیه ها و … نیز در طول و عرض عناصر محاسبه شوند. بنابراین کد زیر را به سند THML خود اضافه کنید:

 
1
2
3

*{
  box-sizing:border-box;
}

قبلا در مورد Box-Sizing صحبت کرده ایم. اگر مطالب آن قسمت از یادتان رفته است به قسمت های قبلی مراجعه کنید.

ابتدا با یک مثال ساده شروع می کنیم. مثال زیر دو ستون دارد؛ یکی 25 و دیگری 75 درصد:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}
 
.header {
  border:1pxsolidred;
  padding:15px;
}
 
.menu {
  width:25%;
  float:left;
  padding:15px;
  border:1pxsolidred;
}
 
.main {
  width:75%;
  float:left;
  padding:15px;
  border:1pxsolidred;
}
</style>
</head>
<body>
 
<div class="header">
  <h1>Chania</h1>
</div>
 
<div class="menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>
 
<div class="main">
  <h1>The City</h1>
  <p>Chania isthe capital of the Chania region on the island of Crete.The city can be divided intwo parts,the old town andthe modern city.</p>
  <p>Resize the browser window tosee how the content respond tothe resizing.</p>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در صورتی که صفحات وب تنها دو ستون داشتند مثال بالا مثال خوبی محسوب می شد اما ما می خواهیم از grid-view های 12 ستونه استفاده کنیم تا روی صفحات خود کنترل کامل داشته باشیم. ابتدا باید مقدار عرض هر ستون را محاسبه کنیم؛ 100 درصد عرض صفحه تقسیم بر 12 ستون مساوی است با 8.33 درصد. سپس برای هر کدام از این ستون های 12 تایی یک کلاس می سازیم که بر اساس قالب "-class="col و تنها عدد آخرش فرق کند. مثال زیر را ببینید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}
 
.header {
  border:1pxsolidred;
  padding:15px;
}
 
.row::after {
  content:"";
  clear:both;
  display:table;
}
 
[class*="col-"] {
  float:left;
  padding:15px;
  border:1pxsolidred;
}
 
.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>
</head>
<body>
 
<div class="header">
  <h1>Chania</h1>
</div>
 
<div class="row">
 
<div class="col-3">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>
 
<div class="col-9">
  <h1>The City</h1>
  <p>Chania isthe capital of the Chania region on the island of Crete.The city can be divided intwo parts,the old town andthe modern city.</p>
  <p>Resize the browser window tosee how the content respond tothe resizing.</p>
</div>
 
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

حالا تمام ستون ها را به سمت چپ Float می کنیم (اگر وب سایت شما فارسی است آن را به راست float کنید) و به آن 15 پیکسل padding می دهیم:

 



1
2
3
4
5

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

همچنین هر ردیف باید در یک <div> قرار بگیرد و مجموع تعداد ستون های یک ردیف باید همیشه برابر 12 باشد:

 



1
2
3
4

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

در مثال بالا 3 و 9 می شود 12.

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

 



1
2
3
4
5

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

حالا برای تکمیل نهایی طرح باید عناصر را استایل دهی کنیم تا از نظر ظاهری زیبا تر شوند:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}
 
.row::after {
  content:"";
  clear:both;
  display:table;
}
 
[class*="col-"] {
  float:left;
  padding:15px;
}
 
.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%;}
 
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:01px3pxrgba(0,0,0,0.12),01px2pxrgba(0,0,0,0.24);
}
 
.menu li:hover {
  background-color:#0099cc;
}
</style>
</head>
<body>
 
<div class="header">
  <h1>Chania</h1>
</div>
 
<div class="row">
  <div class="col-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>
 
  <div class="col-9">
    <h1>The City</h1>
    <p>Chania isthe capital of the Chania region on the island of Crete.The city can be divided intwo parts,the old town andthe modern city.</p>
    <p>Resize the browser window tosee how the content respond tothe resizing.</p>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

البته یادتان باشد می توانید از کتابخانه های آماده ی grid نیز استفاده کنید.

نکته: اگر قسمت خروجی این مثال را بسیار کوچک کنید، میبینید که ظاهر جالبی پیدا نمی کند و 100 درصد واکنش گرا نیست. در قسمت بعدی این سری آموزشی درباره ی حل مشکلات آن از طریق media query ها صحبت خواهیم کرد.

منبع: روکسو

ارسال نظر برای این مطلب