Раскладка CSS Grid. Дочерние элементы
Ранее были изложены свойства родительского элемента раскладки Grid. Эта статья расскажет о свойствах дочерних элементов сетки.
grid - column - start;
grid - column - end;
grid - row - start;
grid - row - end;
4 свойства grid - элементов, которыми можно обозначить границы элемента (ячейки).
grid - column - start; указывает вертикальную линию начала элемента;
grid - column - end; указывает вертикальную линию конца элемента;
grid - row - start; указывает горизонтальную линию начала элемента;
grid - row - end; указывает горизонтальную линию конца элемента;
Согласно рис.1 верхняя часть состоит из 3-х элементов. Основная разметка
контейнера выглядит как
.conteiner {
display: -ms-grid;
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 составляет 32%;
- линия3 — линия4 - 32% : расстояние по горизонтали между вертикальными линиями 3 и 4 составляет 32%;
- линия4 — линия5 - 32% : расстояние по горизонтали между вертикальными линиями 4 и 5 составляет 32%;
- линия5 — линия6 - 5px : расстояние по горизонтали между вертикальными линиями 5 и 6 составляет 5px;
Разметка строк:
- линия1 — линия2 - 5px : расстояние по вертикали между горизонтальными линиями 1 и 2 составляет 5px;
- линия2 — линия3 - 10em : расстояние по вертикали между горизонтальными линиями 2 и 3 составляет 10em ;
- линия3 — линия4 - 5em : расстояние по вертикали между горизонтальными линиями 3 и 4 составляет 5em;
- линия4 — линия5 - 10em : расстояние по вертикали между горизонтальными линиями 4 и 5 составляет 10em;
- линия5 — линия6 - 5px : расстояние по вертикали между горизонтальными линиями 5 и 6 составляет 5px;
Расстояние между колонками 5px;
Расстояние между строками 5px;
рис.1. Разметка страницы с указанием вертикальных и горизонтальных линий
Обозначим положение первого элемента верхней строки. Назовем его 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 {
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
Свойства элементов можно записать короче, используя
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;
start выравнивает содержимое по левой стороне ячейки.
end выравнивает содержимое по правой стороне ячейки.
stretch заполняет всю ширину ячейки.
center выравнивает содержимое по центру ячейки.
align - self
Выравнивает содержимое относительно горизонтальной оси. Применяется ко всем элементам сетки.
Можно использовать следующие значения:
align - self : start | end | center | stretch;
По умолчанию используется stretch;
start выравнивает содержимое по верхней части ячейки.
end выравнивает содержимое по нижней части ячейки.
center выравнивает содержимое по центру ячейки.
stretch заполняет всю высоту ячейки.
Пример разметки grid
К элементу one применим свойство align-self: start, к элементу two свойство justify-self: start, three - свойства justify-self: center; align-self: end. Остальные элементы будут использовать свойства по умолчанию.
Вид:
Свойства дочерних элементов
.examplegrid {display : grid;} justify-content: start;
Код:
<meta charset="utf-8">
<style>
.examplegrid {
border: dotted 1px red;
font-size: 10px;
}.examplegrid {
display : grid;
display: -ms-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">
<code>.examplegrid {display : grid;}</code>
</div><div class="middle">4</div>
<div class="one-down"><code>justify-content: start;</code></div>
<div class="two-down">6</div></div>
<br>
Эта статья о том, как применяются правила для grid - элементов.
2019-03-08
.