Основные понятия Grid Layout
Что такое грид? |
2 |
|
Грид –
представляет собой пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки.
Элементы могут быть помещены в грид в пределах линий этих колонок и строк.
3
Поддержка
https://caniuse.com/css-grid
Терминология |
4 |
|
grid container — грид-контейнер, или грид-родитель, верхний, родительский элемент грида
grid item — грид-элемент, он же грид-ребёнок, элемент первого уровня вложенности в грид-контейнер grid track — грид-полоса, собирательный термин для ряда и колонки грида
grid cell — грид-ячейка
grid line — грид-линия, виртуальная граница между соседними грид-полосами, к которой можно привязывать грид-элементы
grid area — грид-область, пространство для размещения грид-элементов, ограниченное четырьмя грид-линиями
grid gutter, grid gap — грид-интервал, промежуток между соседними грид-полосами
Пример |
5 |
|
Создадим грид контейнер: |
||
|
||
Разметка: |
|
В браузере:
правление количеством рядов и столбцов6
grid-template-columns | grid-template-rows
7
адание координат грид-элементов
По столбцам: |
grid-column-start | grid-column-end |
По строкам: |
grid-row-start | grid-row-end |
Кодовое слово span, CSS Grid означает количество ячеек в любом направлении, которое займёт элемент.
Ссылки |
8 |
|
Игра https://cssgridgarden.com/
лгоритм размещения грид-элементов 9
1.Определяются все грид элементы.
2.По очереди позиционируются все элементы с явными координатами.
3.По очереди позиционируются элементы с неявными координатами: они занимают ячейки, которые ещё не были «заняты» другими элементами.
9
Отступы
В ранних спецификациях:
grid-column-gap, grid-row-gap, grid-gap)
Промежутки появляются между элементами и не появляются по краям