CSS Grid Container

فهرست مطالب

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

ﺪﻧﺍ ﻩﺪﺷ ﺐﺗﺮﻣ ﺎﻫ ﻒﯾﺩﺭ ﻭ ﺎﻫ ﻥﻮﺘﺳ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﻩﺪﺷ ﻞﯿﮑﺸﺗ ﯼﺍ ﻪﮑﺒﺷ ﯼﺎﻫ ﻢﺘﯾﺁ ﺯﺍ Grid Co

1

2

3

4

5

6

7

8

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

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

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

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

<h1>Grid Container</h1>

<p>A Grid Container consists of grid items arranged in columns and rows</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 child elements(s) of the grid container automatically becomes grid items.</p>

</body>
</html>

ﯼﺭﻮﺗ ﻑﺮﻇ

.ﯽﻄﺧ ﻥﻭﺭﺩ ﻪﮑﺒﺷ<"code class="w3-codespan .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ > ﺎﯾ

.ﺪﻧﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺎﻫ ﻒﯾﺩﺭ ﻭ ﺎﻫ ﻥﻮﺘﺳ ﻞﺧﺍﺩ ﺭﺩ ﻪﮐ ﺪﻧﺍ ﻩﺪﺷ ﻞﯿﮑﺸﺗ ﯼﺍ ﻪﮑﺒﺷ ﯼﺎﻫ ﻢﺘﯾﺁ ﺯﺍ

grid-template-columns ﯽﮔﮋﯾﻭ

.ﺪﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﻥﻮﺘﺳ ﺮﻫ ﺽﺮﻋ ﺪﻧﺍﻮﺗﯽﻣ ﻭ ﺪﻨﮐﯽﻣ ﻒﯾﺮﻌﺗ ﺎﻤﺷ ﻪﮑﺒﺷ ﺡﺮﻃ ﺭﺩ ﺍﺭ ﺎﻫ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﻃﻮﺑﺮﻣ ﻥﻮﺘﺳ ﺽﺮﻋ ﺭﺍﺪﻘﻣ ﺮﻫ ﻥﺁ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﻪﻠﺻﺎﻓ ﺎﺑ ﻩﺪﺷ ﺍﺪﺟ ﺖﺴﯿﻟ ﮏﯾ

.ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ "auto" ،ﺪﻨﺷﺎﺑ ﻥﺎﺴﮑﯾ ﺽﺮﻋ ﯼﺍﺭﺍﺩ ﺎﻫﻥﻮﺘﺳ ﻪﻤﻫ ﺮﮔﺍ ﺎﯾ ،ﺪﯿﻨﮐ ﺺﺨﺸﻣ

ﻝﺎﺜﻣ

:ﺪﯾﺯﺎﺴﺑ ﻥﻮﺘﺳ 4 ﺎﺑ ﻪﮑﺒﺷ ﮏﯾ

 .grid-container {
    display: grid;
  
  grid-template-columns: auto auto auto auto;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 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;
}
</style>
</head>
<body>

<h1>The grid-template-columns Property</h1>

<p>You can use the <em>grid-template-columns</em> property to specify the number of columns in your 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>

ﻪﺟﻮﺗ: ﺭﺎﮐﺩﻮﺧ ﺭﻮﻃ ﻪﺑ ﻪﮑﺒﺷ ،ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﯽﻧﻮﺘﺳ 4 ﻪﮑﺒﺷ ﮏﯾ ﺭﺩ ﺩﺭﻮﻣ 4 ﺯﺍ ﺶﯿﺑ

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫ ﻥﻮﺘﺳ (ﺽﺮﻋ) ﻩﺯﺍﺪﻧﺍ ﻦﯿﯿﻌﺗ ﯼﺍﺮﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﻥﻮﺘﺳ 4 ﯼﺍﺮﺑ ﻩﺯﺍﺪﻧﺍ ﮏﯾ

 .grid-container {
    display: grid;
  
  grid-template-columns: 80px 200px auto 40px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 30px;
  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-template-columns Property</h1>

<p>Use the <em>grid-template-columns</em> property to specify the size of each column.</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>

grid-template-rows ﯽﮔﮋﯾﻭ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﻄﺳ ﺮﻫ ﻉﺎﻔﺗﺭﺍ grid-template-rows

1

2

3

4

5

6

7

8

:ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﻃﻮﺑﺮﻣ ﺮﻄﺳ ﻉﺎﻔﺗﺭﺍ ﺭﺍﺪﻘﻣ ﺮﻫ ﻥﺁ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﻪﻠﺻﺎﻓ ﺎﺑ ﻩﺪﺷ ﺍﺪﺟ ﺖﺴﯿﻟ

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  
  grid-template-rows: 80px 200px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  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-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>Use the <em>grid-template-rows</em> property to specify the size (height) of each row.</p>

</body>
</html>

ﺍﻮﺘﺤﻣ ﻪﯿﺟﻮﺗ ﯽﮔﮋﯾﻭ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻑﺮﻇ ﻞﺧﺍﺩ ﺭﺩ ﻪﮑﺒﺷ ﻞﮐ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﯼﺍﺮﺑ j

1

2

3

4

5

6

ﻪﺟﻮﺗ: ﺖﯿﺻﺎﺧ ﺎﺗ ﺪﺷﺎﺑ ﻑﺮﻇ ﺽﺮﻋ ﺯﺍ ﺮﺘﻤﮐ ﺪﯾﺎﺑ ﻪﮑﺒﺷ ﻞﮐ ﯼﺎﻨﻬﭘ

`ﻝﺎﺜﻣ`

 .grid-container {
    display: grid;
  
  justify-content: space-evenly;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  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 justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-evenly" will give the columns equal amount of space between, and around them:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  
  justify-content: space-around;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  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 justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-around" will give the columns equal amount of space around them:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  
  justify-content: space-between;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  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 justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-between" will give the columns equal amount of space between them:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  
  justify-content: center;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  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 justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "center" will align the grid in the middle of the container:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  
  justify-content: start;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: start;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  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 justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "start" will align the grid at the beginning of the container:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  
  justify-content: end;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: end;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  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 justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "end" will align the grid at the end of the container:</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>

align-content ﯽﮔﮋﯾﻭ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻑﺮﻇ ﻞﺧﺍﺩ ﻪﮑﺒﺷ ﻞﮐ ﯼﺩﻮﻤﻋ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﯼﺍﺮﺑ


ﻪﺟﻮﺗ: ﺖﯿﺻﺎﺧ ﺎﺗ ﺪﺷﺎﺑ ﻑﺮﻇ ﻉﺎﻔﺗﺭﺍ ﺯﺍ ﺮﺘﻤﮐ ﺪﯾﺎﺑ ﻪﮑﺒﺷ ﻞﮐ ﻉﺎﻔﺗﺭﺍ

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: center;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  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;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "center" will align the rows in the middle of the container:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: space-evenly;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
  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;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-evenly" will give the rows equal amount of space between, and around them:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: space-around;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
  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;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-around" will give the rows equal amount of space around them:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: space-between;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
  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;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-between" will give the rows equal amount of space between them:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: start;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
  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;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "start" will align the rows at the beginning of the container:</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>

ﻝﺎﺜﻣ

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: end;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
  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;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "end" will align the rows at the end of the container:</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>