سلام! به آخرین قسمت از دوره ی CSS پیشرفته که راجع به کار آیتم های grid در CSS است، با خوش آمدید.
همانطور که می دانید نگهدارنده (container) در grid ها دارای عناصری هستند که به آن ها آیتم می گوییم. یعنی هر عنصری که داخل این نگهدارنده ها قرار بگیرد یک آیتم محسوب می شود. در حالت عادی هر نگهدارنده برای هر ستون خود یک آیتم را در نظر می گیرد اما ما می توانیم با دستورات CSS آن ها را بزرگتر یا کوچکتر کنیم.
خصوصیت grid-column
خصوصیت grid-column تعیین می کند که هر آیتم در کدام ستون قرار بگیرد؛ به عبارت دیگر به آیتم می گویید که از کجا شروع کرده و در آخر به کجا برسد. آیا متوجه شدید؟ دستور grid-column در واقع خلاصه ی دستورات grid-column-start و grid-column-end است!
برای موقعیت دهی به یک آیتم می توانید از دو راه عمل کنید:
- خط شروع را مشخص کرده و خط پایان را هم مشخص کنید.
- خط شروع را مشخص کرده و تعداد خط های اشغال شونده را مشخص کنید.
در حالت اول می گوییم مثلا آیتم ما باید از خط 1 شروع شده و تا خط پنجم ادامه داشته باشد:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item1 {
grid-column:1/5;
}
</style>
</head>
<body>
<h1>The grid-column Property</h1>
<p>Usethe<em>grid-column</em>propertytospecify where toplace an item.</p>
<p>Item1 will start on column-line1andendon column-line5:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در حالت دوم می گوییم آیتم ما باید از خط اول شروع شده و به اندازه ی 3 ستون ادامه پیدا کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item1 {
grid-column:1/span3;
}
</style>
</head>
<body>
<h1>The grid-column Property</h1>
<p>Usethe<em>grid-column</em>propertytospecify where toplace an item.</p>
<p>Item1 will start on column-line1andspan3columns:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
و یا به طور مثال می گوییم آیتمی که کلاس item2 را دارد باید از ستون دوم شروع شده و تا 3 ستون بعد ادامه پیدا کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item2 {
grid-column:2/span3;
}
</style>
</head>
<body>
<h1>The grid-column Property</h1>
<p>Usethe<em>grid-column</em>propertytospecify where toplace an item.</p>
<p>Item2 will start on column line2andspan3columns:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت grid-row
خصوصیت grid-row تعیین می کند که آیتم ما در چه ردیفی (نه ستون!) قرار بگیرد. مانند دستور قبلی باید نقاط شروع و پایان را برای آیتم خود تعیین کنیم و همانطور که حدس میزنید خصوصیت grid-row دستور خلاصه شده ی grid-row-start و grid-row-end است.
همچنین دو حالتی که برای خصوصیت بالا ذکر کردیم برای این خصوصیت هم صادق است. بنابراین در مثال اول می گوییم آیتم ما باید از ردیف اول شروع شده و تا ردیف چهارم ادامه پیدا کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item1 {
grid-row:1/4;
}
</style>
</head>
<body>
<h1>The grid-row Property</h1>
<p>Usethe<em>grid-row</em>propertytospecify where toplace an item.</p>
<p>Item1 will start on row-line1andendon row-line4:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
و برای مثال دوم می گوییم آیتم ما باید از ردیف اول شروع شده و تا 2 ردیف بعد را شامل شود:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item1 {
grid-row:1/span2;
}
</style>
</head>
<body>
<h1>The grid-row Property</h1>
<p>Usethe<em>grid-row</em>propertytospecify where toplace an item.</p>
<p>Item1 will start on row1andspan2rows:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
<div class="item17">17</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت grid-area
دستور grid-area خلاصه شده ی دستورات grid-row-start و grid-column-start و grid-row-end و grid-column-end است.
به مثال های زیر دقت کنید:
مثال اول: به item8 می گوییم که از ردیف اول و ستون دوم شروع شده و در ردیف پنجم و ستون ششم تمام شود:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item8 {
grid-area:1/2/5/6;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can usethe<em>grid-area</em>propertytospecify where toplace an item.</p>
<p>The syntax is:</p>
<p>grid-row-start/grid-column-start/grid-row-end/grid-column-end.</p>
<p>Item8 will start on row-line1andcolumn-line2,andendon row-line5column-line6:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال دوم: item8 باید از ردیف دوم و ستون اول شروع شده و تا دو ردیف و سه ستون ادامه پیدا کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item8 {
grid-area:2/1/span2/span3;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can usethe<em>grid-area</em>propertytospecify where toplace an item.</p>
<p>The syntax isgrid-row-start/grid-column-start/grid-row-end/grid-column-end.</p>
<p>Item8 will start on row-line2andcolumn-line1,andspan2rows and3columns:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نام گذاری آیتم ها
از خصوصیت grid-area می توان برای نام گذاری آیتم ها هم استفاده کرد!
نمونه ای از نام گذاری آیتم ها
سپس آیتم های نام گذاری شده را می توان با استفاده از grid-template-areas صدا زد. به مثال زیر توجه کنید.
در کد زیر نام آیتم اول را برابر myArea قرار داده ایم که در یک grid پنج ستونه تمام 5 ستون را اشغال می کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.item1 {
grid-area:myArea;
}
.grid-container {
display:grid;
grid-template-areas:'myArea myArea myArea myArea myArea';
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can usethe<em>grid-area</em>propertytoname grid items.</p>
<p>You can refer tothe name when you set up the grid layout,by using the<em>grid-template-areas</em>propertyon the grid container.</p>
<p>Item1,iscalled"myArea"andwill take up the place of all five columns:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
هر ردیف با استفاده از single quotation (علامت ') مشخص می شود. ستون های هر دریف داخل همین علامت تعریف و با اسپیس از هم جدا می شوند.
نکته: علامت نقطه یعنی آیتم ها هیچ نامی ندارد.
آیتم myArea در کد زیر دو ستون را اشغال کرده است. همچنین سه علامت نقطه نیز (همانطور که گفتیم) به معنی آیتم های بدون نام هستند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.item1 {
grid-area:myArea;
}
.grid-container {
display:grid;
grid-template-areas:'myArea myArea . . .';
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can usethe<em>grid-area</em>propertytoname grid items.</p>
<p>You can refer tothe name when you set up the grid layout,by using the<em>grid-template-areas</em>propertyon the grid container.</p>
<p>Item1,iscalled"myArea"andwill take up the place of two columns(out of five):</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر می خواهید دو ردیف مختلف داشته باشید، باید ستون مربوط به ردیف دوم را درون یک جفت Single quotation دیگر قرار بدهید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.item1 {
grid-area:myArea;
}
.grid-container {
display:grid;
grid-template-areas:'myArea myArea . . .''myArea myArea . . .';
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can usethe<em>grid-area</em>propertytoname grid items.</p>
<p>You can refer tothe name when you set up the grid layout,by using the<em>grid-template-areas</em>propertyon the grid container.</p>
<p>Item1,iscalled"myArea"andwill take up the place of two columns(out of five),andwill span two rows:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همچنین با نام گذاری تمام آیتم ها یک قالب آماده برای وب سایت خود خواهیم داشت:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.item1 {grid-area:header;}
.item2 {grid-area:menu;}
.item3 {grid-area:main;}
.item4 {grid-area:right;}
.item5 {grid-area:footer;}
.grid-container {
display:grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can usethe<em>grid-area</em>propertytoname grid items.</p>
<p>You can refer tothe name when you set up the grid layout,by using the<em>grid-template-areas</em>propertyon the grid container.</p>
<p>Thisgrid layout contains six columns andthree rows:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ترتیب آیتم ها
سیستم grid به ما اجازه می دهد که آیتم ها را به ترتیب دلخواه خود و در مکان دلخواه خود قرار دهیم؛ به عبارت دیگر آیتمی که در کد HTML ما اول آمده است می تواند در خروجی آخرین آیتم باشد. به این مثال دقت کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
.item1 {grid-area:1/3/2/4;}
.item2 {grid-area:2/3/3/4;}
.item3 {grid-area:1/1/2/2;}
.item4 {grid-area:1/2/2/3;}
.item5 {grid-area:2/1/3/2;}
.item6 {grid-area:2/2/3/3;}
</style>
</head>
<body>
<h1>Sort the Items</h1>
<p>The items donothave tobe displayed inthe same order asthey are written inthe HTML code.</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همچنین می توانیم با استفاده از media query ها این ترتیب را در سایز مختلف صفحات، به صورت مختلف نمایش دهیم تا هر سایز نمایشگری ترتیب خاصی را نشان دهد:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
text-align:center;
padding:20px0;
font-size:30px;
}
@media only screen and (max-width: 500px) {
.item1 {grid-area:1/span3/2/4;}
.item2 {grid-area:3/3/4/4;}
.item3 {grid-area:2/1/3/2;}
.item4 {grid-area:2/2/span2/3;}
.item5 {grid-area:3/1/4/2;}
.item6 {grid-area:2/3/3/4;}
}
</style>
</head>
<body>
<h1>Re-arange the Order on Small Devices</h1>
<p>Resize the window to500pixels see the effect.</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
این قسمت آخرین قسمت از دوره ی CSS پیشرفته بود، امیدوارم از آن لذت برده باشید.
چطور از فشرده ساز Winrar استفاده کنیم؟