نگهدارنده های grid یا grid container در CSS
برای آنکه یک عنصر HTML را به Grid Container تبدیل کنید باید مقدار display آن را روی grid یا inline-grid قرار دهید. Grid container ها شامل آیتم های grid هستند که خودشان داخل ستون ها و ردیف های فرضی قرار دارند. به این مثال توجه کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoauto;
grid-gap:10px;
background-color:#2196F3;
padding:10px;
}
.grid-container > div {
background-color:rgba(255,255,255,0.8);
border:1pxsolidblack;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<h1>Grid Container</h1>
<p>AGrid Container consists of grid items arranged incolumns androws</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>Direct childelements(s)of the grid container automatically becomes grid items.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا مستطیل آبی رنگی که آیتم ها درونش قرار دارند همان نگهدارنده یا container ما است. در این مقاله می خواهیم نحوه ی کار با آن و مسائل مربوط به آن را بررسی کنیم.
خصوصیت grid-template-columns
خصوصیت grid-template-columns تعداد ستون های grid شما و عرض هر ستون را مشخص می کند. مقادیری که این خصوصیت می گیرد با اسپیس از هم جدا می شوند و هر مقدار عرض ستون متناظرش را تعیین می کند. فرض کنید می خواهید یک grid چهار ستونه داشته باشید؛ اگر شما بخواهید ستون های این grid دارای عرض یکسانی باشند، باید چهار بار auto را به آن بدهید و در غیر این صورت باید مقدار عرض ستون ها را مشخص کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoautoauto;
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>grid-template-columns</h1>
<p>You can usethe<em>grid-template-columns</em>propertytospecify the number of columns inyour grid layout.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: اگر تعداد ستون های شما بیشتر از 4 عدد باشد، ستون های بعدی به صورت خودکار به یک ردیف جدید منتقل می شوند.
خصوصیت grid-template-columns عرض ستون ها را نیز مشخص می کند. به این مثال توجه کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:80px200pxauto30px;
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>grid-template-columns</h1>
<p>Usethe<em>grid-template-columns</em>propertytospecify the size of eachcolumn.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید عرض ستون ها بر اساس چیزی که در کد تعریف شده، متفاوت است.
خصوصیت grid-template-rows
خصوصیت grid-template-rows ارتفاع هر ستون را مشخص می کند. مثال آن بسیار ساده و قابل درک است؛ مقادیر آن دقیقا مانند خصوصیت grid-template-columns با اسپیس از هم جدا می شوند و هر مقدار ارتفاع ستون متناظرش را تعیین می کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
grid-template-columns:autoautoauto;
grid-template-rows:80px200px;
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-template-rows Property</h1>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<p>Usethe<em>grid-template-rows</em>propertytospecify the size(height)of eachrow.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تفاوت ارتفاع ستون ها در مثال بالا کاملا مشخص است.
خصوصیت justify-content
خصوصیت justify-content تمام موارد داخل نگهدارنده را تراز می کند. البته برای آنکه این خصوصیت تاثیری داشته باشد باید عرض کل grid از عرض container (نگهدارنده) کمتر باشد.
مثال اول:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
justify-content:space-evenly;
grid-template-columns:50px50px50px;/*Make the grid smaller than the container*/
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 justify-content Property</h1>
<pdir='rtl'>بااستفادهازخصوصیت<em>justify-content</em>میتوانیدgridراداخلنگهدارندهترازکنید.</p>
<pdir='rtl'>مقدار"space-evenly"بهاطرافوبینستونهابهمقداریکسانفضایخالیاضافهمیکند.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مقدار “space-evenly” به اطراف و بین ستون ها به مقدار یکسان فضای خالی اضافه می کند.
مثال هایی از مقادیر دیگر این خصوصیت:
مثال اول:
|
|
.grid-container{
display:grid;
justify-content:space-around;
}
|
مقدار space-around به اطراف ستون ها فضای خالی اضافه می کند.
مثال دوم:
|
|
.grid-container{
display:grid;
justify-content:space-between;
}
|
مقدار space-between بین ستون ها فضای خالی ایجاد می کند.
مثال سوم:
|
|
.grid-container{
display:grid;
justify-content:center;
}
|
مقدار center تمام grid را در وسط نگهدارنده قرار می دهد.
مثال چهارم:
|
|
.grid-container{
display:grid;
justify-content:start;
}
|
مقدار start تمام grid را در ابتدای نگهدارنده قرار می دهد.
مثال پنجم:
|
|
.grid-container{
display:grid;
justify-content:end;
}
|
مقدار end تمام grid را در آخر نگهدارنده قرار می دهد.
خصوصیت align-content
خصوصیت align-content تمام grid را از نظر محور عمودی در وسط نگهدارنده قرار می دهد. توجه داشته باشید که اگر ارتفاع کل grid از ارتفاع نگهدارنده بیشتر باشد این دستور به هیچ وجه کار نخواهد کرد.
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.grid-container {
display:grid;
height:400px;
align-content:center;
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;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<pdir='rtl'>بااستفادهازخصوصیت<em>align-content</em>میتوانیدgridراازنظرمحورعمودیدروسطنگهدارندهقراردهید.</p>
<pdir='rtl'>مقدار"center"ردیفهارادروسطنگهدارندهترازمیکند.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مقدار “center” ردیف ها را در وسط نگهدارنده تراز می کند.
مثال هایی از مقادیر دیگر این خصوصیت:
مثال اول:
|
|
.grid-container{
display:grid;
height:400px;
align-content:space-evenly;
}
|
مقدار space-evenly به اطراف ردیف ها و همچنین بین ردیف ها مقدار فضای خالی یکسانی اضافه می کند.
مثال دوم:
|
|
.grid-container{
display:grid;
height:400px;
align-content:space-around;
}
|
مقدار space-around در اطراف ردیف ها فضای خالی ایجاد می کند.
مثال سوم:
|
|
.grid-container{
display:grid;
height:400px;
align-content:space-between;
}
|
مقدار space-between بین ردیف ها فضای خالی ایجاد می کند.
مثال چهارم:
|
|
.grid-container{
display:grid;
height:400px;
align-content:start;
}
|
مقدار start تمام grid را در ابتدای نگهدارنده قرار می دهد.
مثال پنجم:
|
|
.grid-container{
display:grid;
height:400px;
align-content:end;
}
|
مقدار end تمام grid را در آخر نگهدارنده قرار می دهد.
امیدواریم از بحث grid container در CSS لذت برده باشید و این درس از سری آموزش CSS پیشرفته برای شما عزیزان مفید بوده باشد.
چطور از فشرده ساز Winrar استفاده کنیم؟