CSS ﻪﮑﺒﺷ ﯼﺪﻨﺑ ﺡﺮﻃ

فهرست مطالب

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

:ﺪﻨﮐﯽﻣ ﺮﺗﻥﺎﺳﺁ ﯽﺑﺎﯾﺖﯿﻌﻗﻮﻣ ﻭ ﺎﻫﺭﻭﺎﻨﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻪﺑ ﺯﺎﯿﻧ ﻥﻭﺪﺑ ﺍﺭ ﺏ

Header

Menu

Main

Right

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>Grid Layout</h1>

<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</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 ﯼﻭﺭ display ﯽﮔﮋﯾﻭ ﺎﺑ ﺪﻟﺍﻭ ﺮﺼﻨﻋ ﮏﯾ ﺪﯾﺎﺑ ﯼﺍu2

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

1
2
3
4
5
6
7

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

<!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-row: 1;
  grid-column: 1;
}

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

.item3 {
  grid-row: 1;
  grid-column: 3;
}

.item4 {
  grid-row: 2;
  grid-column: 1;
}

.item5 {
  grid-row: 2;
  grid-column: 2;
}

.item6 {
  grid-row: 2;
  grid-column: 3;
}

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

<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 class="grid-item item6">6</div>  
  <div class="grid-item item7">7</div>
</div>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>

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

</body>
</html>

ﻪﮑﺒﺷ ﺡﺮﻃ

.ﺪﻨﮐﯽﻣ ﺮﺗﻥﺎﺳﺁ ﯽﺑﺎﯾﺖﯿﻌﻗﻮﻣ ﻭ ﺎﻫﺭﻭﺎﻨﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻪﺑ ﺯﺎﯿﻧ ﻥﻭﺪﺑ ﺍﺭ ﺏ

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

.ﺩﻮﺷ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻥﺭﺪﻣ ﯼﺎﻫﺮﮔﺭﻭﺮﻣ ﻡﺎﻤﺗ ﺭﺩ ﻪﮑﺒﺷ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

57.0 16.0 52.0 10 44

ﻪﮑﺒﺷ ﺮﺻﺎﻨﻋ

.ﺖﺳﺍ ﻩﺪﺷ ﻞﯿﮑﺸﺗ ﺪﻧﺯﺮﻓ ﺮﺼﻨﻋ ﺪﻨﭼ ﺎﯾ ﮏﯾ ﺎﺑ ،ﺪﻟﺍﻭ ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ ﻪﮑﺒﺷ ﺡﺮﻃ ﮏﯾ

ﻝﺎﺜﻣ

<div 
  class="grid-container">
  <div class="grid-item">1</div>
  <div 
  class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div 
  class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div 
  class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

1

2

3

4

5

6

7

8

9

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

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

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ﺶﯾﺎﻤﻧ ﯽﮔﮋﯾﻭ

.ﺩﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ ﻪﮑﺒﺷ ﻑﺮﻇ ﮏﯾ ﻪﺑ ﻥﺁ ﺶﯾﺎﻤﻧ<"code class="w3-codespan> ﯽﮔﮋﯾﻭ ﺎ

ﻝﺎﺜﻣ

 .grid-container {
  
  display: grid;
}

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

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

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

<h1>display: grid</h1>

<p>Use display: grid; to make a block-level grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

 .grid-container {
  
  display: inline-grid;
}

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

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

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

<h1>display: inline-grid</h1>

<p>Use display: inline-grid; to make an inline grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

.ﺪﻧﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ ﻪﮑﺒﺷ ﻡﻼﻗﺍ ﻪﺑ ﺭﺎﮐﺩﻮﺧ ﺭﻮﻃ ﻪﺑ ﻪﮑﺒﺷ ﻑﺮﻇ ﻢﯿﻘﺘﺴﻣ ﻥﺍﺪﻧﺯﺮﻓ ﻪﻤﻫ

ﻪﮑﺒﺷ ﯼﺎﻫ ﻥﻮﺘﺳ

.ﺪﻧﻮﺷ ﯽﻣ ﻩﺪﯿﻣﺎﻧ ﻥﻮﺘﺳ ﻪﮑﺒﺷ ﯼﺎﻫ ﻢﺘﯾﺁ ﯼﺩﻮﻤﻋ ﻁﻮﻄﺧ

ﻪﮑﺒﺷ ﯼﺎﻫ ﻒﯾﺩﺭ

.ﺪﻧﻮﺷ ﯽﻣ ﻩﺪﯿﻣﺎﻧ ﻒﯾﺩﺭ ﻪﮑﺒﺷ ﯼﺎﻫ ﻢﺘﯾﺁ ﯽﻘﻓﺍ ﻁﻮﻄﺧ

ﻪﮑﺒﺷ ﯼﺎﻫ ﻑﺎﮑﺷ

.ﺩﻮﺷ ﯽﻣ ﻩﺪﯿﻣﺎﻧ ﻑﺎﮑﺷ ﻒﯾﺩﺭ/ﻥﻮﺘﺳ ﺮﻫ ﻦﯿﺑ ﯼﺎﻫﺎﻀﻓ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﻑﺎﮑﺷ ﻩﺯﺍﺪﻧﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﺮﯾﺯ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺯﺍ ﯽﮑﯾ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ

  • column-gap
  • row-gap
  • gap

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻪﻠﺻﺎﻓ column-gap

 .grid-container {
  
  display: grid;
  column-gap: 50px;
}

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

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

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

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

<p>Use the <em>column-gap</em> property to adjust the space between the columns:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺎﻫ ﻒﯾﺩﺭ ﻦﯿﺑ ﻪﻠﺻﺎﻓ row-gap ﯽﮔ

 .grid-container {
  
  display: grid;
  row-gap: 50px;
}

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

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

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

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

<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ gap ﯽﮔﮋﯾﻭ

 .grid-container {
  
  display: grid;
  gap: 50px 100px;
}

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

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

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

<h1>The gap Property</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

ﻭ ﻒﯾﺩﺭ ﻑﺎﮑﺷ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ gap ﯽﮔ

 .grid-container {
  
  display: grid;
  gap: 50px;
}

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

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

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

<h1>The gap Property:</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ﻪﮑﺒﺷ ﻁﻮﻄﺧ

.ﺪﻧﻮﺷ ﯽﻣ ﻩﺪﯿﻣﺎﻧ ﻥﻮﺘﺳ ﻁﻮﻄﺧ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻁﻮﻄﺧ

.ﺪﻧﻮﺷ ﯽﻣ ﻩﺪﯿﻣﺎﻧ ﻒﯾﺩﺭ ﻁﻮﻄﺧ ﺎﻫ ﻒﯾﺩﺭ ﻦﯿﺑ ﻁﻮﻄﺧ

:ﺪﯿﻨﮐ ﻪﻌﺟﺍﺮﻣ ﻁﻮﻄﺧ ﻩﺭﺎﻤﺷ ﻪﺑ ﻪﮑﺒﺷ ﻑﺮﻇ ﺭﺩ ﻪﮑﺒﺷ ﺩﺭﻮﻣ ﮏﯾ ﻥﺩﺍﺩ ﺭﺍﺮﻗ ﻡﺎﮕﻨﻫ

ﻝﺎﺜﻣ

:ﺩﻮﺷ ﻢﺘﺧ 3 ﻥﻮﺘﺳ ﻂﺧ ﻪﺑ ﺪﯿﻫﺩ ﻩﺯﺎﺟﺍ ﻭ ﺪﯿﻫﺩ ﺭﺍﺮﻗ 1 ﻥﻮﺘﺳ ﻂﺧ ﺭﺩ ﺍﺭ ﯼﺍ ﻪﮑﺒﺷ ﺩﺭﻮﻣ ﮏﯾ

 .item1 {

    grid-column-start: 1;
  grid-column-end: 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-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<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>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

ﻝﺎﺜﻣ

:ﺩﻮﺷ ﻢﺘﺧ 3 ﺮﻄﺳ ﻪﺑ ﺪﯿﻫﺩ ﻩﺯﺎﺟﺍ ﻭ ﺪﯿﻫﺩ ﺭﺍﺮﻗ 1 ﺮﻄﺳ ﺭﺩ ﺍﺭ ﯼﺭﻮﺗ ﺩﺭﻮﻣ ﮏﯾ

 .item1 {

    grid-row-start: 1;
  grid-row-end: 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-row-start: 1;
  grid-row-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<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>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

CSS ﻪﮑﺒﺷ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ

column-gap

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻪﻠﺻﺎﻓ

gap

column-gap ﻭ row-gap ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

grid

،em>grid-template-rows> ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

grid-area

grid-column-end ﻭ em- ﺹﺍﻮﺧ .ﺖﺳﺍ grid-row-start، gri

grid-auto-columns

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺽﺮﻓ ﺶﯿﭘ ﻥﻮﺘﺳ ﻩﺯﺍﺪﻧﺍ

grid-auto-flow

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﮑﺒﺷ ﺭﺩ ﺭﺎﮐﺩﻮﺧ ﺩﺭﺍﻮﻣ ﺝﺭﺩ ﻩﻮﺤﻧ

grid-auto-rows

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺽﺮﻓ ﺶﯿﭘ ﻒﯾﺩﺭ ﻩﺯﺍﺪﻧﺍ

grid-column

grid-column-end ﻭ grid-column-start ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋ

grid-column-end

ﺪﺑﺎﯾ ﻥﺎﯾﺎﭘ ﺎﺠﮐ ﺪﯾﺮﮔ ﻢﺘﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

grid-column-gap

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻪﻠﺻﺎﻓ ﻩﺯﺍﺪﻧﺍ

grid-column-start

ﺩﻮﺷ ﻉﻭﺮﺷ ﺎﺠﮐ ﺯﺍ ﺪﯾﺮﮔ ﻢﺘﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

grid-gap

grid-column-gap ﻭ grid-row-gap ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

grid-row

grid-row-end ﻭ grid-row-start ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

grid-row-end

ﺪﺑﺎﯾ ﻥﺎﯾﺎﭘ ﺎﺠﮐ ﺪﯾﺮﮔ ﻢﺘﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

grid-row-gap

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻒﯾﺩﺭ ﻦﯿﺑ ﻪﻠﺻﺎﻓ ﻩﺯﺍﺪﻧﺍ

grid-row-start

ﺩﻮﺷ ﻉﻭﺮﺷ ﺎﺠﮐ ﺯﺍ ﺪﯾﺮﮔ ﻢﺘﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

grid-template

grid-template-rows, grid-template-columns ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏ

grid-template-areas

ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ ﻩﺪﺷ ﯼﺭﺍﺬﮔﻡﺎﻧ ﻪﮑﺒﺷ ﺩﺭﺍﻮﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﺎﻫﻒﯾﺩﺭ ﻭ ﺎﻫ

grid-template-columns

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﯼﺍ ﻪﮑﺒﺷ ﯼﺪﻨﺑ ﺡﺮﻃ ﮏﯾ ﺭﺩ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﺩﺍﺪﻌﺗ ﻭ ﺎﻫ ﻥﻮﺘﺳ ﻩﺯﺍﺪﻧﺍ

grid-template-rows

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﯼﺍ ﻪﮑﺒﺷ ﯼﺪﻨﺑ ﺡﺮﻃ ﺭﺩ ﺍﺭ ﺎﻫﺮﻄﺳ ﻩﺯﺍﺪﻧﺍ

row-gap

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﮑﺒﺷ ﯼﺎﻫ ﻒﯾﺩﺭ ﻦﯿﺑ ﻑﺎﮑﺷ

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