Раскладка CSS Grid. Родительский элемент. Часть 1
Предисловие
Раскладка css Grid ( CSS Grid Layout ) на сегодня применима в Chrome, Opera, Firefox, Edge, Safari, браузер Android, Яндекс. . В IE применение ограничено, в Opera Mini не применяется, также, как в некоторых других, менее популярных (рис. 1).
рис. 1. Применение свойства браузерами согласно данных сайта caniuse
CSS Grid кардинально отличается от Flexbox. Больше всего Grid похож на модульную сетку. Представьте себе лист бумаги, разделенный на квадраты и прямоугольники, каждый из которых содержит отдельный блок (рис. 2).
рис. 2. Предварительная раскладка материалов
Раскладка предусматривает возможность устанавливать размеры не только основных элементов, но и пробельных шагов. CSS Grid предлагается использовать для макетов больших размеров, например, страница. Тогда как Flexbox лучше применять для элементов внутри страницы.
Свойства CSS Grid
Свойства css grid есть как для родительского элемента, так и для дочерних. Родительским элементом будет некий контейнер, дочерними — элементы. Элементы вложены в контейнер. Например (рис. 3), применим свойство grid к виду страницы, показанному на рис. 2.
рис. 3. Свойство Grid на примере
Определимся с терминами:
- Контейнер сетки (контейнер) — родительский элемент.
- Линии сетки (горизонтальная и вертикальная) — линии, которые определяют структуру сетки.
- Ячейка сетки — пространство между соседними горизонтальными и соседними вертикальными линиями.
- Трек — пространство между двумя соседними линиями, горизонтальными или вертикальными.
Свойства родительского элемента
Основные свойства раскладки
display
display: grid;
grid означает, что контейнер будет использовать свойство grid по умолчанию, как простую сетку. Для браузера IE применяется
display: -ms-grid;
Свойства column, float, clear, vertical-align к раскладке не применимы.
grid-template-columns
Определяет колонки сетки. Указываются размеры треков через пробел. Трек — расстояние между двумя соседними линиями. Здесь — между двумя вертикальными линиями.
grid-template-rows
Определяет строки сетки. Указывается расстояние между двумя соседними горизонтальными линиями.
Например, для рис. 3 определим длину элемента первой строки в 30% и высоту 1-й и 3-й строки как 10em, высоту 2-й как 5em.
Вид
Свойство Grid
.examplegrid {display : grid;}
Код:
<meta charset="utf-8">
<style>
.examplegrid {border: dotted 1px red;
font-size: 10px;
text-align: center;}
.examplegrid {
display : grid;display: -ms-grid;
grid-template-columns: 30% 30% 30%;
grid-template-rows: 10em 5em 10em;
}.examplegrid div {
border: dotted 2px green;
}
</style><h4>Свойство Grid</h4>
<div class="examplegrid">
<div>
<strong>1</strong>
</div><div>
<strong>2</strong>
</div><div>
<code>.examplegrid {display : grid;}</code>
</div><div>4</div>
<div>5</div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
Когда размер трека повторяется, можно использовать repeat. Указываем repeat, затем в скобках количество и размер повторяющихся элементов через запятую. Например, repeat(2, 30em)
Вид
.examplegrid1 {display : grid;} Код:
<meta charset="utf-8">
<style>.examplegrid1 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid1 {
display : grid;display: -ms-grid;
grid-template-columns: repeat(2,40%) auto;
grid-template-rows: 10em 5em 10em;
}.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>repeat</div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
Также можно использовать единицу fr. Она означает свободное пространство. Эта единица подобна auto. Через fr мы можем разделить все пространство между крайними линиями на пропорциональные части.
Вид
.examplegrid2 {display : grid;} Код:
<meta charset="utf-8">
<style>.examplegrid2 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid2 {
display : grid;display: -ms-grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 10em 5em 10em;
}.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>fr</div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
Если какой-то трек имеет конкретное значение, остальное пространство можно распределить через единицу fr (см. следующий пункт).
grid - column - gap; grid - row - gap;
Позволяет установить пробельные шаги — расстояние между ячейками как по горизонтали, так и по вертикали.
grid - column - gap устанавливает пробельный шаг по вертикали;
grid - row - gap устанавливает пробельный шаг по горизонтали.
Можно использовать сокращенное свойство grid - gap. Указывается расстояние по горизонтали и вертикали через пробел:
grid - gap: grid - row - gap | grid - column - gap
Пример:
grid - gap: 5px 8px;
Если указать только одно свойство , а второе свойство не указывать, grid - row — gap и grid - column — gap будут равны.
Пример:
grid - gap: 5px;
Вид
.examplegrid3 {display : grid;} row-gap
Код
<meta charset="utf-8">
<style>.examplegrid3 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid3 {
display : grid;display: -ms-grid;
grid-template-columns: 2fr 250px 1fr;
grid-template-rows: 10em 5em 10em;
grid-column-gap: 10px;
grid-row-gap: 5px;
}.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>fr + px</div>
<div>6</div><div>7</div>
<div>column-gap<br>row-gap</div>
<div>9</div></div>
В этой статье я рассказала о части свойств раскладки, с которых нужно начинать разметку. Другие свойства родительского элемента Grid будут показаны далее.
Родионова Галина Евгеньевна
2019-03-04