Форма входа

Unatka.ru

css3

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

В статье Раскладка CSS Grid. Родительский элемент. Часть 1 показаны основные свойства родительского элемента. В этой статье будут показаны свойства css grid, которые помогут выполнить выравнивание элементов сетки.

justify-items


Выравнивает содержимое относительно вертикальной оси. Применяется ко всем элементам сетки.
Можно использовать следующие значения:


justify-items : start | end | center | stretch;


По умолчанию используется stretch;


Рассмотрим примеры свойств css grid:


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

|  justify - items: start |


Вид:

Свойство justify-items

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

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

 .examplegrid  {
    display : grid;

    display: -ms-grid;

   grid-template-columns: 30% 30%  30%;
   grid-template-rows: 10em 5em 10em;
   justify-items: start;
}
 .examplegrid div  {
    border: dotted 2px green;   
}
</style>

<h4>Свойство justify-items</h4>

<div class="examplegrid">

  <div>
    <strong>1</strong>
  </div>

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

  <div>
    <strong>3</strong>
  </div>

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

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

</div>
<br>

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

 |  justify - items:  end  |

Вид:

1
.examplegrid2 {display : grid;}
3
4
justify-items: end;
6
7
8
9

Код:
<meta charset="utf-8">
<style>
 .examplegrid2  {
    border: dotted 1px red;
    font-size: 10px;
}
 .examplegrid2  {
    display : grid;

    display: -ms-grid;

    grid-template-columns: 1fr 2fr  3fr;
    grid-template-rows: 10em 5em 10em;
    justify-items: end;  
}
 .examplegrid2 div  {
    border: dotted 2px green;   
}
 
</style>
<div class="examplegrid2">
  <div>
    <strong>1</strong>
  </div>

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

  <div>3</div>

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

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

</div>
<br>


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

| justify - items : center |

Вид:

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

Код:
<meta charset="utf-8">
<style>
  .examplegrid1  {
    border: dotted 1px red;
    font-size: 10px;
}
 .examplegrid1  {
    display : grid;

    display: -ms-grid;

    grid-template-columns: repeat(2,40%) auto;
    grid-template-rows: 10em 5em 10em;
    justify-items: center;
}
.examplegrid1 div {
    border: dotted 2px green;   
}
 
</style>
<div class="examplegrid1">
  <div>
    <strong>1</strong>
  </div>

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

  <div>3</div>

   <div>4</div>
   <div><code>justify-items: center;</code></div>
   <div>6</div>

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

</div>
<br>


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


 |  justify - items:   stretch |


Вид:

1
.examplegrid3 {display : grid;}
3
4
justify-items: stretch;
6
7
grid-gap
9


Код:
<meta charset="utf-8">
<style>
.examplegrid3  {
    border: dotted 1px red;
    font-size: 10px;
}
 .examplegrid3  {
    display : grid;

    display: -ms-grid;

    grid-template-columns: 2fr 250px  1fr;
    grid-template-rows: 10em 5em 10em;
    grid-gap: 10px;
    justify-items: stretch;
}

.examplegrid3 div {
    border: dotted 2px green;   
}
 
</style>

<div class="examplegrid3">

  <div>
    <strong>1</strong>
  </div>

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

  <div>3</div>

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

   <div>7</div>
   <div><code>grid-gap</code></div>
   <div>9</div>

</div>

align - items


Выравнивает содержимое относительно горизонтальной оси. Применяется ко всем элементам сетки.
Можно использовать следующие значения:


align - items :  start |  end | center | stretch;


По умолчанию используется  stretch;


start выравнивает содержимое по верхней части ячейки:

| align - items : start |


Вид:

Свойство align-items

1
.examplegrid4 {display : grid;}
3
4
justify-items: start;
align-items: start;
6
7
8
9


Код:
<meta charset="utf-8">
<style>
 .examplegrid4  {

    border: dotted 1px red;
    font-size: 10px;
   

}

 .examplegrid4  {
    display : grid;

    display: -ms-grid;

grid-template-columns: 30% 30%  30%;
grid-template-rows: 10em 5em 10em;
justify-items: start;
align-items: start;
}
</style>

<h4>Свойство align-items</h4>

<div class="examplegrid4">

  <div>
    <strong>1</strong>
  </div>

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

  <div>
    <strong>3</strong>
  </div>

   <div>4</div>
<div><code>justify-items: start;</code><br><code>align-items: start;</code></div><div>6</div>

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

</div>
<br>

end выравнивает содержимое по нижней части ячейки:

| align - items : end |


Вид:

1
.examplegrid5 {display : grid;}
3
4
justify-items: center;
align-items: end;
6
7
8
9


Код:
<meta charset="utf-8">
<style>
 .examplegrid5  {
    border: dotted 1px red;
    font-size: 10px;
}
 .examplegrid5  {
    display : grid;

    display: -ms-grid;

grid-template-columns: repeat(2,40%) auto;
grid-template-rows: 10em 5em 10em;
justify-items: center;
align-items: end;
}
.examplegrid5 div {
    border: dotted 2px green;    
}

 
</style>

<div class="examplegrid5">

  <div>
    <strong>1</strong>
  </div>

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

  <div>
 3
  </div>

   <div>4</div>
<div><code>justify-items: center;</code><br><code>align-items: end;</code></div><div>6</div>

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

</div>
<br>

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

| align - items: center |


Вид:

1
.examplegrid6 {display : grid;}
3
4
justify-items: end;
align-items: center;
6
7
8
9

Код:
<meta charset="utf-8">
<style>
.examplegrid6 {

    border: dotted 1px red;
    font-size: 10px;
}

 

 .examplegrid6  {
    display : grid;

    display: -ms-grid;

grid-template-columns: 1fr 2fr  3fr;
grid-template-rows: 10em 5em 10em;
justify-items: end;
align-items: center;
}

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

 
</style>
<div class="examplegrid6">

  <div>
    <strong>1</strong>
  </div>

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

  <div>
 3
  </div>

   <div>4</div>
<div><code>justify-items: end;</code><br><code>align-items: center;</code></div><div>6</div>

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

</div>
<br>

stretch заполняет всю высоту ячейки:

| align - items : stretch |

Вид:

1
.examplegrid7 {display : grid;}
3
4
justify-items: stretch;
align-items: stretch;
6
7
grid-gap
9


Код:
<meta charset="utf-8">
<style>
.examplegrid7  {
    border: dotted 1px red;
    font-size: 10px;
}
 .examplegrid7  {
    display : grid;

    display: -ms-grid;

grid-template-columns: 2fr 250px  1fr;
grid-template-rows: 10em 5em 10em;
grid-gap: 10px;
justify-items: stretch;
align-items: stretch;
}

.examplegrid7 div {
    border: dotted 2px green;    
}
</style>

<div class="examplegrid7">

  <div>
    <strong>1</strong>
  </div>

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

  <div>
 3
  </div>

   <div>4</div>
<div><code>justify-items: stretch;</code><br><code>align-items: stretch;</code></div><div>6</div>

   <div>7</div>
<div><code>grid-gap</code></div><div>9</div>

</div>


В следующей статье рассмотрим какие свойства применять, когда сетка контейнера заведомо меньше страницы.

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

2019-03-04


◄ Назад 

 Вперед ►

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

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

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