Форма входа

Unatka.ru

css3

Раскладка CSS Grid. Родительский элемент. Часть 3

В предыдущей статье Раскладка CSS Grid. Родительский элемент. Часть 2  показаны основные свойства родительского элемента раскладки, имеющие отношение к содержимому контейнера. В этой статье будут показаны свойства, которые помогут выровнять содержимое внутри контейнера когда сетка имеет фиксированный размер и заведомо меньше контейнера.


justify - content


Выравнивает сетку относительно вертикальной оси.
Может принимать следующие значения:
justify - content : start | end | center | stretch | space - around | space - between | space - evenly |;


start выравнивает сетку по левой стороне контейнера:
Вид:

1
.examplegrid {display : grid;}
3
4
justify-content: start;
6
7
8
9

Код:

<meta charset="utf-8">
<style>
 .examplegrid  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

 .examplegrid  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

 .examplegrid  {
justify-content: start;
}

 .examplegrid div {
    border: dotted 2px green;
    
}
.examplegrid span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong>2</strong>
  </div>

  <div>
    <code>.examplegrid {display : grid;}</code>
  </div>

   <div>4</div>
<div><code>justify-content: start;</code></div><div>6</div>

   <div>7</div>
   <div>8</div>
   <div>9</div>

</div>
<br>


end   выравнивает сетку по правой стороне контейнера:
Вид:

1
2
.examplegrid3 {display : grid;}
4
justify-content: end;
6
7
8
9

Код:

<meta charset="utf-8">
<style>
  .examplegrid3  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid3  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

 .examplegrid3  {
justify-content: end;
}

  .examplegrid3 div {
    border: dotted 2px green;    
}

  .examplegrid3 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid3">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong>2</strong>
  </div>

  <div>
    <code>.examplegrid3 {display : grid;}</code>
  </div>

   <div>4</div>
<div><code>justify-content: end;</code></div><div>6</div>

   <div>7</div>
<div>8</div><div>9</div>

</div>
<br>

center выравнивает сетку по центру контейнера:
Вид:

1
.examplegrid1 {display : grid;}
3
4
repeat
6
7
justify-content: center;
9

Код:

<meta charset="utf-8">
<style>
 .examplegrid1  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

 .examplegrid1  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

  .examplegrid1  {
justify-content: center;
}

  .examplegrid1 div {
    border: dotted 2px green;    
}

  .examplegrid1 span {
    background-color: blue;
    width: 100%;
}
 
</style>


<div class="examplegrid1">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong> <code>.examplegrid1 {display : grid;} </code></strong>
  </div>

  <div>3</div>

  <div>4</div>
  <div>repeat</div>
  <div>6</div>

   <div>7</div>
   <div><code>justify-content: center;</code></div>
   <div>9</div>

</div>
<br>



stretch сетка заполняет всю ширину контейнера
Вид:

1
2
.examplegrid2 {display : grid;}
4
justify-content: stretch;
6
7
8
9

Код:

<meta charset="utf-8">
<style>
  .examplegrid2 {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid2  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

 .examplegrid2  {
    justify-content: stretch;
}

  .examplegrid2 div {
    border: dotted 2px green;
    
}

 .examplegrid2 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid2">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong>2</strong>
  </div>

  <div>
    <code>.examplegrid2 {display : grid;}</code>
  </div>

   <div>4</div>
   <div><code>justify-content: stretch;</code></div>
   <div>6</div>

   <div>7</div>
   <div>8</div>
   <div>9</div>

</div>
<br>


space - around  равные расстояния между элементами, отступы по краям равны половине расстояния между элементами
Ви

1
2
.examplegrid4 {display : grid;}
4
justify-content: space-around;
6
7
8
9

Вид:

Код:

<meta charset="utf-8">
<style>
  .examplegrid4 {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid4  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

 .examplegrid4  {
    justify-content: space-around;
}

 .examplegrid4 div {
    border: dotted 2px green;    
}

 .examplegrid4 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid4">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong>2</strong>
  </div>

  <div>
    <code>.examplegrid4 {display : grid;}</code>
  </div>

   <div>4</div>
   <div><code>justify-content: space-around;</code></div>
   <div>6</div>

   <div>7</div>
   <div>8</div>
   <div>9</div>

</div>
<br>



space - between  равные расстояния между элементами, отступы по краям отсутствуют
Вид:

1
.examplegrid5 {display : grid;}
3
4
repeat
6
7
justify-content: space-between;
9

Код:

<meta charset="utf-8">
<style>
 
 .examplegrid5  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

 .examplegrid5  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

 .examplegrid5  {
justify-content: space-between;
}

 .examplegrid5 div {
    border: dotted 2px green;    
}

 .examplegrid5 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid5">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong> <code>.examplegrid5 {display : grid;} </code></strong>
  </div>

  <div>
 3
  </div>

   <div>4</div>
<div>repeat</div><div>6</div>

   <div>7</div>
   <div><code>justify-content: space-between;</code></div>
   <div>9</div>

</div>
<br>


space - evenly равные расстояния между элементами, отступы по краям равны расстоянию между элементами
Вид:

1
.examplegrid6 {display : grid;}
3
4
fr
6
7
justify-content: space-evenly;
9

Код:

<meta charset="utf-8">
<style>
  .examplegrid6  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid6  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

 .examplegrid6  {
justify-content: space-evenly;
}  

 .examplegrid6 div {
    border: dotted 2px green;    
}

 .examplegrid6 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid6">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong> <code>.examplegrid6 {display : grid;} </code></strong>
  </div>

  <div>3</div>

   <div>4</div>
   <div>fr</div>
   <div>6</div>

   <div>7</div>
   <div><code>justify-content: space-evenly;</code></div>
   <div>9</div>

</div>

<br>

 

align - content

Выравнивает сетку относительно горизонтальной оси.


Принимает следующие значения:
align - content :  start |  end | center | stretch | space - around  | space - beetwin  | space - evenly  |;


start выравнивает сетку по верхней стороне контейнера:
Вид:

1
.examplegrid8 {display : grid;}
3
4
fr + px
6
7
justify-content: start;
align-content: start;
9

Код:

<meta charset="utf-8">
<style>
  .examplegrid8  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid8  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;

}

  .examplegrid8  {
justify-content: start;
align-content: start;
}  

  .examplegrid8 div {
    border: dotted 2px green;    
}

 .examplegrid8 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid8">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong> <code>.examplegrid8 {display : grid;} </code></strong>
  </div>

  <div>3</div>

   <div>4</div>
   <div>fr + px</div>
   <div>6</div>

   <div>7</div>
   <div><code>justify-content: start;</code><br><code>align-content: start;</code></div>
   <div>9</div>

</div>
<br>


end выравнивает сетку по нижней стороне контейнера:
Вид:

1
.examplegrid7 {display : grid;}
3
4
fr + px
6
7
justify-content: end;
align-content: end;
9

Код:

<meta charset="utf-8">
<style>
  .examplegrid7  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid7  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

.examplegrid7  {
justify-content: end;
align-content: end;
}  

  .examplegrid7 div {
    border: dotted 2px green;    
}

 .examplegrid7 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid7">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong> <code>.examplegrid7 {display : grid;} </code></strong>
  </div>

  <div>3</div>

   <div>4</div>
   <div>fr + px</div>
   <div>6</div>

   <div>7</div>
   <div><code>justify-content: end;</code><br><code>align-content: end;</code></div>
   <div>9</div>

</div>
<br>


center выравнивает сетку по центру контейнера:
Вид:

1
.examplegrid9 {display : grid;}
3
4
fr + px
6
7
justify-content: start;
align-content: center;
9

Код:

<meta charset="utf-8">
<style>
  .examplegrid9  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid9  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

.examplegrid9  {
justify-content: start;
align-content: center;
}  

 .examplegrid9 div {
    border: dotted 2px green;    
}
 .examplegrid9 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid9">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong> <code>.examplegrid9 {display : grid;} </code></strong>
  </div>

  <div>3</div>

   <div>4</div>
   <div>fr + px</div>
   <div>6</div>

   <div>7</div>
   <div><code>justify-content: start;</code><br><code>align-content: center;</code></div>
   <div>9</div>

</div>
<br>
 


space - between  равные расстояния по вертикали между элементами, отступы по краям отсутствуют
Вид:

1
.examplegrid10 {display : grid;}
3
4
fr + px
6
7
justify-content: start;
align-content: space-between;
9

Код:

<meta charset="utf-8">
<style>
  .examplegrid10  {
    border: dotted 1px red;
    font-size: 10px;
    text-align: center;
}

  .examplegrid10  {
    display : grid;
    display: -ms-grid;
    grid-gap: 5px;
    grid-template-columns: 90px 100px 90px;
    grid-template-rows: 10em 5em 10em;
    height: 30em;
}

  .examplegrid10  {
    justify-content: start;
    align-content: space-between;
}
 
  .examplegrid10 div {
    border: dotted 2px green;    
}

  .examplegrid10 span {
    background-color: blue;
    width: 100%;
}
 
</style>

<div class="examplegrid10">

  <span>
    <strong>1</strong>
  </span>

  <div>
    <strong> <code>.examplegrid10 {display : grid;} </code></strong>
  </div>

  <div>3</div>

   <div>4</div>
   <div>fr + px</div>
   <div>6</div>

   <div>7</div>
   <div><code>justify-content: start;</code><br><code>align-content: space-between;</code></div>
   <div>9</div>

</div>


space - around  равные расстояния по вертикали  между элементами, отступы по краям равны половине расстояния между элементами;
space - evenly  равные расстояния по вертикали между элементами, отступы по краям равны  расстоянию между элементами.


В этой статье показано применение свойств раскладки grid: justify - content и
align - content.

Родионова Галина Евгеньевна

2019-03-04


◄ Назад 

 Вперед ►

Поделитесь с друзьями!

Закрыть
Форма входа

Я согласен(на) на обработку моих персональных данных