CSS ﻪﮑﺒﺷ ﺩﺭﻮﻣ

فهرست مطالب

    نمایش فهرست مطالب

.ﺪﻧﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ ﻪﮑﺒﺷ ﺩﺭﺍﻮﻣ ﻪﺑ ﺭﺎﮐﺩﻮﺧ ﺭﻮﻃ ﻪﺑ ﻪﮑﺒﺷ ﻪﻈﻔﺤﻣ ﺪﻧﺯﺮﻓ (ﯼﺎﻫ) ﯽﻠﺻﺍ ﺮﺻﺎﻨﻋ

.ﺩﺮﯿﮕﺑ ﺮﺑ ﺭﺩ ﺍﺭ ﻒﯾﺩﺭ ﺎﯾ ﻥﻮﺘﺳ ﻦﯾﺪﻨﭼ ﻪﮐ ﺖﺳﺍ ﻩﺪﺷ ﻢﯿﻈﻨﺗ 5 ﻭ ،2 ،1 ﺩﺭﻮﻣ

1

2

3

4

5


→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.item5 {
  grid-column: 1 / span 3;
  grid-row: 3;
}
</style>
</head>
<body>

<h1>A Five Items Grid Layout</h1>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
</div>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

<p>Item 1, 2, and 5 are set to span multiple columns or rows.</p>

</body>
</html>

(ﻡﻼﻗﺍ) ﮎﺩﻮﮐ ﺮﺻﺎﻨﻋ

.ﺖﺳﺍ ﯼﺍﻪﮑﺒﺷ ﻡﻼﻗﺍ ﯼﻭﺎﺣ ﯼﺍﻪﮑﺒﺷ ﺮﻨﯿﺘﻧﺎﮐ ﮏﯾ

.ﺪﻧﺮﯿﮕﺑ ﺭﺍﺮﻗ ﻒﯾﺩﺭ ﺎﯾ/ﻭ ﻥﻮﺘﺳ ﻦﯾﺪﻨﭼ ﺭﺩ ﻪﮐ ﺪﯿﻫﺩ ﻞﯾﺎﺘﺳﺍ ﯼﺭﻮﻃ ﺍﺭ ﯼﺍﻪﮑﺒﺷ ﯼﺎﻫu20

:ﻥﻮﺘﺳ-ﺪﯾﺮﮔ ﯽﮔﮋﯾﻭ

ﻪﮐ ﺪﻨﮐﯽﻣ ﻒﯾﺮﻌﺗ grid-column ﯽﮔﮋﯾﻭ

.ﺪﺳﺮﺑ ﻥﺎﯾﺎﭘ ﻪﺑ ﺎﺠﮐ ﻢﺘﯾﺁ ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ ﺎﺠﮐ ﺯﺍ ﻢﺘﯾﺁ ﻪﮐ ﺪﯿﻨﮐ ﯽﻣ ﻦﯿﯿﻌﺗ ﺎﻤﺷ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ grid-column ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋ

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ "span" ﯼﺪﯿﻠﮐ ﻪﻤﻠﮐ ﺯﺍ ﺎﯾ ﺪﯿﻨﮐ ﻪﻌﺟﺍﺮﻣ ﻂﺧ ﻩﺭﺎﻤﺷ ﻪﺑ ﺪﯿﻧﺍﻮﺗ ﯽ

ﻝﺎﺜﻣ

:ﺪﺳﺮﺑ ﻥﺎﯾﺎﭘ ﻪﺑ 5 ﻥﻮﺘﺳ ﺯﺍ ﻞﺒﻗ ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ 1 ﻥﻮﺘﺳ ﺯﺍ "item1" ﻪﮐ ﺪﯿﻨﮐ ﯼﺭﺎﮐ

 .item1 {
    
  grid-column: 1 / 5;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / 5;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column 1 and end before column 5:</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>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﺯﺎﺑ ﺍﺭ ﻥﻮﺘﺳ 3 ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ 1 ﻥﻮﺘﺳ ﺯﺍ "item1" ﻪﮐ ﺪﯿﻨﮐ ﯼﺭﺎﮐ

 .item1 {
    
  grid-column: 1 / span 3;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 3;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column-line 1 and span 3 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 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>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﺯﺎﺑ ﺍﺭ ﻥﻮﺘﺳ 3 ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ 2 ﻥﻮﺘﺳ ﺯﺍ "item2" ﻪﮐ ﺪﯿﻨﮐ ﯼﺭﺎﮐ

 .item2 {
    
  grid-column: 2 / span 3;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item2 {
  grid-column: 2 / span 3;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item2 will start on column line 2 and span 3 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 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>

:ﻪﮑﺒﺷ ﻒﯾﺩﺭ ﯽﮔﮋﯾﻭ

ﺪﯾﺎﺑ ﻒﯾﺩﺭ ﻡﺍﺪﮐ ﺭﺩ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻦﯿﯿﻌﺗ grid-row ﯽﮔ

.ﺪﺳﺮﺑ ﻥﺎﯾﺎﭘ ﻪﺑ ﺎﺠﮐ ﻢﺘﯾﺁ ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ ﺎﺠﮐ ﺯﺍ ﻢﺘﯾﺁ ﻪﮐ ﺪﯿﻨﮐ ﯽﻣ ﻦﯿﯿﻌﺗ ﺎﻤﺷ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ grid-row ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ "span" ﯼﺪﯿﻠﮐ ﻪﻤﻠﮐ ﺯﺍ ﺎﯾ ﺪﯿﻨﮐ ﻪﻌﺟﺍﺮﻣ ﻂﺧ ﻩﺭﺎﻤﺷ ﻪﺑ ﺪﯿﻧﺍﻮﺗ ﯽ

ﻝﺎﺜﻣ

:ﺪﺑﺎﯾ ﻪﻤﺗﺎﺧ 4 ﻒﯾﺩﺭ ﺭﺩ ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ 1 ﻒﯾﺩﺭ ﺯﺍ "item1" ﻪﮐ ﺪﯿﻨﮐ ﯼﺭﺎﮐ

 .item1 {
    
  grid-row: 1 / 4;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row: 1 / 4;
}
</style>
</head>
<body>

<h1>The grid-row Property</h1>

<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row-line 1 and end on row-line 4:</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>

ﻝﺎﺜﻣ

:ﺪﻧﺎﺷﻮﭙﺑ ﺍﺭ ﻒﯾﺩﺭ 2 ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ 1 ﻒﯾﺩﺭ ﺯﺍ "item1" ﻪﮐ ﺪﯿﻨﮐ ﯼﺭﺎﮐ

 .item1 {
    
  grid-row: 1 / span 2;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row: 1 / span 2;
}
</style>
</head>
<body>

<h1>The grid-row Property</h1>

<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row 1 and span 2 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 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>

ﻪﮑﺒﺷ ﻪﻘﻄﻨﻣ ﮎﻼﻣﺍ

:ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ ﻥﺍﻮﻨﻋ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

ﻝﺎﺜﻣ

:ﺪﺑﺎﯾ ﻪﻤﺗﺎﺧ 6 ﻥﻮﺘﺳ ﻭ 5 ﻂﺧ-ﺮﻄﺳ ﺭﺩ ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ 2 ﻂﺧ-ﻥﻮﺘﺳ ﻭ 1 ﻂﺧ-ﺮﻄﺳ ﺯﺍ "item8" ﻪﮐ

 .item8 {
    
  grid-area: 1 / 2 / 5 / 6;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to specify where to place 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-line 1 and column-line 2, and end on row-line 5 column-line 6:</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>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﺯﺎﺑ ﺍﺭ ﻥﻮﺘﺳ 3 ﻭ ﺮﻄﺳ 2 ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ 1 ﻂﺧ-ﻥﻮﺘﺳ ﻭ 2 ﻂﺧ-ﺮﻄﺳ ﺯﺍ "item8" ﻪﮐ ﺪﯿﻨﮐ

 .item8 {
    
  grid-area: 2 / 1 / span 2 / span 3;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to specify where to place an item.</p>

<p>The syntax is grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 will start on row-line 2 and column-line 1, and span 2 rows and 3 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 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>

ﻪﮑﺒﺷ ﺩﺭﺍﻮﻣ ﯼﺭﺍﺬﮕﻣﺎﻧ

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﻪﮑﺒﺷ ﺩﺭﺍﻮﻣ ﻪﺑ ﻡﺎﻧ ﺹﺎﺼﺘﺧﺍ ﯼﺍﺮﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ

Header

Menu

Main

Right

Footer

.ﺩﺍﺩ ﻉﺎﺟﺭﺍ ﻪﮑﺒﺷ ﻑﺮﻇ grid-template-areas ﯽﮔﮋﯾﻭ

ﻝﺎﺜﻣ

:ﺩﺮﯿﮔ ﯽﻣ ﺮﺑ ﺭﺩ ﯽﻧﻮﺘﺳ ﺞﻨﭘ ﯼﺍ ﻪﮑﺒﺷ ﯼﺪﻨﺑ ﺡﺮﻃ ﮏﯾ ﺭﺩ ﺍﺭ ﻥﻮﺘﺳ ﺞﻨﭘ ﺮﻫ ﻭ ﺪﻨﮐ ﯽﻣ ﺖﻓﺎﯾﺭﺩ

 .item1 {
  grid-area: 
  myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea 
  myArea myArea myArea';
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will 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>

ﺩﻮﺷ ﯽﻣ ﻒﯾﺮﻌﺗ (' ') ﻑﻭﺮﺘﺳﺎﭘﺁ ﺎﺑ ﻒﯾﺩﺭ ﺮﻫ

ﺪﻧﺍ ﻩﺪﺷ ﺍﺪﺟ ﻢﻫ ﺯﺍ a ﺎﺑ ﻪﮐ ﺪﻧﻮﺷ ﯽﻣ ﻒﯾﺮﻌﺗ ﺎﻫ ﻑﻭﺮﺘﺳﺎﭘﺁ ﻞﺧﺍﺩ ﺭﺩ ﺮﻄﺳ ﺮﻫ ﯼﺎﻫ ﻥﻮﺘﺳ

ﻪﺟﻮﺗ: ﺖﺳﺍ ﻡﺎﻧ ﻥﻭﺪﺑ ﻪﮑﺒﺷ ﺩﺭﻮﻣ ﮏﯾ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ ﻪﻄﻘﻧ ﺖﻣﻼﻋ.

ﻝﺎﺜﻣ

ﻩﺭﻭﺩ ﻢﺋﻼﻋ) ﯽﻧﻮﺘﺳ ﺞﻨﭘ ﻪﮑﺒﺷ ﺡﺮﻃ ﮏﯾ ﺭﺩ ﻥﻮﺘﺳ ﻭﺩ "myArea" ﺪﯿﻫﺩ ﻩﺯﺎﺟﺍ

 .item1 {
  grid-area: 
  myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea 
  . . .';
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will 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>

:ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺎﻫ ﻑﻭﺮﺘﺳﺎﭘﺁ ﺯﺍ ﯼﺮﮕﯾﺩ ﻪﻋﻮﻤﺠﻣ ﻥﻭﺭﺩ ﺍﺭ ﻡﻭﺩ ﺮﻄﺳ ﻥﻮﺘﺳ ،ﺮﻄﺳ ﻭﺩ ﻒﯾﺮﻌﺗ ﯼﺍﺮ

ﻝﺎﺜﻣ

"item1" ﻥﻮﺘﺳ ﻭﺩ ﻪﺑ ﺍﺭ ﻭ ﺪﯿﻨﮐ ﻞﯾﺪﺒﺗ ﻒﯾﺩﺭ ﻭﺩ:

 .grid-container {
  grid-template-areas: 'myArea myArea 
  . . .' 'myArea myArea . . .';
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will take up the place of two columns (out of five), and will 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>

ﻝﺎﺜﻣ

:ﺪﯾﺯﺎﺴﺑ ﺏﻭ ﻪﺤﻔﺻ ﯼﺍﺮﺑ ﻩﺩﺎﻣﺁ ﯼﻮﮕﻟﺍ ﮏﯾ ﻭ ﺪﯾﺮﺒﺑ ﻡﺎﻧ ﺍﺭ ﺩﺭﺍﻮﻣ ﻪﻤﻫ

 .item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { 
  grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: 
  footer; }
.grid-container {
  grid-template-areas:
    
  'header header header header header header'
    'menu main 
  main main right right'
    'menu footer footer footer footer 
  footer';
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<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';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>This grid layout contains six columns and three 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>

ﻡﻼﻗﺍ ﺐﯿﺗﺮﺗ

Grid Layout ﻢﯿﻫﺩ ﺭﺍﺮﻗ ﻢﯾﺭﺍﺩ ﺖﺳﻭﺩ ﻪﮐ ﯽﯾﺎﺟ ﺮﻫ ﺭﺩ ﺍﺭ ﺩﺭﺍﻮﻣ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ

.ﺩﻮﺷ ﺮﻫﺎﻇ ﻪﮑﺒﺷ ﺭﺩ ﺩﺭﻮﻣ ﻦﯿﻟﻭﺍ ﻥﺍﻮﻨﻋ ﻪﺑ ﺖﺴﯿﻧ ﻡﺯﻻ HTML ﺪﮐ ﺭﺩ ﺩﺭﻮﻣ ﻦﯿﻟﻭﺍ

1

2

3

4

5

6

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  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 grid items do not have to be displayed in the same order as they are written in the 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>

:ﺪﯿﻨﮐ ﺐﺗﺮﻣ ﻩﺭﺎﺑﻭﺩ ﺺﺨﺸﻣ ﺶﯾﺎﻤﻧﻪﺤﻔﺻ ﯼﺎﻫﻩﺯﺍﺪﻧﺍ ﯼﺍﺮﺑ ﺍﺭ ﺵﺭﺎﻔﺳ ،ﯼﺍﻪﻧﺎ

ﻝﺎﺜﻣ

 @media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / 
  span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / 
  span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 
  { grid-area: 2 / 3 / 3 / 4; }
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 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 to 500 pixels 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>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024