Grid css. Дочерние элементы и пример разметки html страницы

Ранее были изложены свойства родительского элемента раскладки Grid css. Эта статья расскажет и покажет какие свойства имеют дочерние элементы сетки на примере разметки.

4 свойства grid - элементов, которыми можно обозначить границы элемента (ячейки):

grid - column - start;  - граница начала ячейки ао вертикали;

grid - column - end; - граница конца ячейки по вертикали (колонка);

grid - row - start; - граница начала ячейки по горизонтали; 

grid - row — end; - граница конца ячейки по горизонтали (строка);

На рис.1 видим, что верхняя часть состоит из 3-х элементов. 

Основная разметка контейнера:

.conteiner {
display : grid;
grid-template-columns: [1] 5px [2] repeat(3,32%) [3, 4, 5] 5px[6] ;
grid-template-rows: [1] 5px [2] 10em [3] 5em [4] 10em [5] ; 
grid-gap: 5px;
}

Разметка колонок: 

линия1 — линия2 - 5px : расстояние по горизонтали между вертикальными линиями 1 и 2 (отступ) составляет 5px;

линия2 — линия3 - 32% : расстояние по горизонтали между вертикальными линиями 2 и 3 (ячейка one) составляет 32%;

линия3 — линия4 - 32% : расстояние по горизонтали между вертикальными линиями 3 и 4 (ячейка two) составляет 32%;

линия4 — линия5 - 32% : расстояние по горизонтали между вертикальными линиями 4 и 5 (ячейка three) составляет 32%;

линия5 — линия6 - 5px : расстояние по горизонтали между вертикальными линиями 5 и 6 (отступ) составляет 5px;

Расстояние между колонками (пробельный шаг) 5px;

Разметка строк:

линия1 — линия2 - 5px : расстояние по вертикали между горизонтальными линиями 1 и 2 (отступ) составляет 5px;

линия2 — линия3 - 10em : расстояние по вертикали между горизонтальными линиями 2 и 3 (ячейка one) составляет 10em ;

линия3 — линия4 - 5em : расстояние по вертикали между горизонтальными линиями 3 и 4 (ячейка two) составляет 5em;

линия4 — линия5 - 10em : расстояние по вертикали между горизонтальными линиями 4 и 5 (ячейка three) составляет 10em;

линия5 — линия6 - 5px : расстояние по вертикали между горизонтальными линиями 5 и 6 (отступ) составляет 5px;

Расстояние между строками (пробельный шаг) 5px;

Обозначим положение первого элемента верхней строки, назовем его one и присвоим ему класс .one :

.one {
grid - column — start: 2; 
grid - column — end: 3; 
grid - row — start: 2; 
grid - row — end: 3;
}

Здесь мы указали, что первый элемент начинается:

по горизонтали (строка ) - с горизонтальной линии 2 и заканчивается на горизонтальной линии 3;

по вертикали (колонка) - с вертикальной линии 2 и заканчивается на вертикальной линии 3.

Когда grid - column - end и grid - row - end не указаны элемент займет 1 трек по умолчанию.

Элемент, следующий за первым в строке назовем two с классом .two и разметим:

.two  {
grid - column — start: 3; 
grid - column — end: 4; 
grid - row — start: 2; 
grid - row — end: 3;
}

Здесь мы указали, что второй элемент начинается:

по горизонтали (строка ) - с горизонтальной линии 2 и заканчивается на горизонтальной линии 3;

по вертикали (колонка) - с вертикальной линии 3 и заканчивается на вертикальной линии 4.

Элемент, следующий за первым в колонке назовем middle и разметим:

.middle {

grid - column — start: 2; 

grid - column — end: 5; 

grid - row — start: 3; 

grid - row — end: 4;

}

Здесь мы указали, что средний элемент начинается:

по горизонтали (строка ) - с горизонтальной линии 3 и заканчивается на горизонтальной линии 4;

по вертикали (колонка) - с вертикальной линии 2 и заканчивается на вертикальной линии 5.

Подобным образом размечаем остальные элементы.

Сокращенная запись 

Свойства элементов можно записать короче, используя

grid - column; 

grid - row; 

Стартовую и конечную линии указываем через слеш “/”.

Для элемента two-down запись будет выглядеть как 

.two-down {

grid-column: 4/5;

grid-row: 4;

}

Здесь:

элемент занимает по горизонтали (строка ) - горизонтальную строку 4;

элемент начинается по вертикали (колонка) - с вертикальной линии 4 и заканчивается на вертикальной линии 5.

Правила выравнивания содержимого grid-элемента

justify - self 

Выравнивает содержимое элемента относительно вертикальной оси.

Принимает правила:

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

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

align - self

Выравнивает содержимое относительно горизонтальной оси. Применяется ко всем элементам сетки.

Можно использовать следующие значения:

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

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

Пример верстки html страницы с использованием grid css

ВИД:

КОД:

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

 .examplegrid  {
   display : grid;    
   grid-template-columns:  5px   repeat(3,30%)   5px;
   grid-template-rows: 5px 10em 5em 10em; 
   grid-gap: 5px;
   
   background-color: grey;
   font-size: 10px;
 } 
 
 .one {
   grid-column-start: 2; 
   grid-column-end: 3; 
   grid-row-start: 2; 
   grid-row-end: 3;

   justify-self: stretch; 
   align-self:  start;

   background-color: green;
 }

.two  {
   grid-column-start: 3; 
   grid-column-end: 4; 
   grid-row-start: 2; 
   grid-row-end: 3;

   justify-self: start; 
   align-self:  stretch;

   background-color: green;
 }

 .three {
   grid-column: 4/5;
   grid-row: 2;

   justify-self: center; 
   align-self:  end;

   background-color: green;
 }

.middle {
   grid-column-start: 2; 
   grid-column-end: 5; 
   grid-row-start: 3; 
   grid-row-end: 4;

   background-color: red;
 }

.one-down  {
   grid-column: 2/4;
   grid-row: 4;

   background-color: yellow;
 }

.two-down  {
   grid-column: 4/5;
   grid-row: 4;

   background-color: yellow;
 }
</style>

<h4>Свойства дочерних элементов</h4>

<div class="examplegrid">

  <div class="one">
    <strong>1</strong>
  </div>

  <div class="two">
    <strong>2</strong>
  </div>

  <div class="three">
    <strong>3</strong>
    <code>
      .examplegrid {display : grid;}
    </code>
  </div>

   <div class="middle">
     <strong>4</strong>
   </div>

   <div class="one-down">
     <strong>5</strong>
     <code>
       justify-content: start;
     </code>
   </div>
   <div class="two-down">
     <strong>6</strong>
   </div>

</div>
<br>

В примере подробно изложен способ применения свойств css.