CSS Grid

Август 10, 2022

Содержание

2. Размеры minmax() - минимальный и максимальный размер трека minmax(1fr, 200px)
3. Имена треков При создании строки или столбца сетки вы можете указать имя: grid-template-row: [first] 200px [second]
4. grid-template-areas Для упрощения разметки сетки имена также даются и для областей. Для этого используется свойство grid-template-areas.
5. grid-template-areas В кавычках записывается строка Grid, внутри которых через пробел записываются имена областей. Повторяющиеся имена станут
6. grid-area Применяется для элементов. Данное свойство используется в двух вариантах: 1. Как указание области для элемента
7. Выравнивание сетки Следующие свойства по выравниванию применяются для ВСЕГО КОНТЕЙНЕРА justify-items: выравнивание по горизонтали для элементов
8. Размер автострок и автостолбцов Когда ваши элементы появляются за пределами обозначенными сеткой, то добавляются дополнительные строки
9. Ссылка https://tuhub.ru/posts/css-grid-complete-guide
10. CSS grid layout
11. CSS grid layout Ещё один способ расположения элементов. Grid представляет собой пересекающийся набор горизонтальных и вертикальных
13. grid tracks Для задания столбцов и строк сетки нужно использовать свойства grid-template-columns и grid-template-rows. Эти свойства
14. grid-template Свойство для сокращенной записи grid-template-rows и grid-template-columns grid-template: grid-template-rows / grid-template-columns
15. fr и repeat fr (fraction) - единица измерения для Grid треков, доля. Если для треков задать
16. Grid-линии При задании строк и столбцов создаются Grid-линии (линии нумерации).
17. Промежутки между треками row-gap: расстояние между строками column-gap: расстояние между столбцами gap: row-gap column-gap - два
18. Расположение элементов Свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end задаются для дочерних элементов сетки и указывают расположение
19. Сокращенная запись и span Для сокращения используются grid-column и grid-row, где начало и конец записываются через
20. Выравнивание элемента по ячейке justify-self: выравнивание вдоль строки. Значения start, end, center, stretch align-self: выравнивание вдоль
21. Дополнительные ссылки https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout https://fls.guru/grid.html
23. Скачать презентацию

Слайд 2

Размеры
minmax() - минимальный и максимальный размер трека
minmax(1fr, 200px)

Слайд 3

Имена треков
При создании строки или столбца сетки вы можете указать имя:
grid-template-row:

[first] 200px [second] 300px
Сделает две строки с именами first и second
Имя можно будет использовать при указании места начала дочернего элемента
grid-row-start: first;
grid-row-end: second;

Слайд 4

grid-template-areas
Для упрощения разметки сетки имена также даются и для областей. Для

этого используется свойство grid-template-areas.
Запись представляет собой визуальное представление сетки.
grid-template-areas: "header header header"
"body body body"
"body body body"
". footer ad";

Слайд 5

grid-template-areas
В кавычках записывается строка Grid, внутри которых через пробел записываются имена

областей. Повторяющиеся имена станут областью.
ВАЖНО! Область обязательно должна быть прямоугольной.
Для указания ячейки без области можно поставить точку (.)
Если не указывать grid-template-rows и grid-template-columns, то сетка генерируется на основе grid-template-area

Слайд 6

grid-area
Применяется для элементов. Данное свойство используется в двух вариантах:
1. Как указание

области для элемента из grid-template-areas
2. Как сокращение grid-row-start / grid-column-start / grid-row-end / grid-column-end

Слайд 7

Выравнивание сетки
Следующие свойства по выравниванию применяются для ВСЕГО КОНТЕЙНЕРА
justify-items: выравнивание по

горизонтали для элементов сетки внутри ячейки
align-items: выравнивание по вертикали для элементов сетки внутри ячейки
place-items: сокращение align-items / justify-items
Значения: start, end, center, stretch
justify-content: выравнивание треков по горизонтали сетки (контейнера)
align-content: выравнивание треков по вертикали сетки (контейнера)
place-content: сокращение align-content / justify-content
Значения: start, end, center, stretch, space-between, space-around, space-evenly

Слайд 8

Размер автострок и автостолбцов
Когда ваши элементы появляются за пределами обозначенными сеткой,

то добавляются дополнительные строки и столбцы. Вы можете указать размеры для таких строк и столбцов при помощи следующих свойств
grid-auto-columns
grid-auto-rows

Слайд 9

Ссылка
https://tuhub.ru/posts/css-grid-complete-guide

Слайд 10

CSS grid layout

Слайд 11

CSS grid layout
Ещё один способ расположения элементов.
Grid представляет собой пересекающийся набор

горизонтальных и вертикальных линий - один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам. Строки и столбцы в Grid называют треками.
Для создания сетки нужно прописать для контейнера display: grid или display: inline-grid

Слайд 12

Слайд 13

grid tracks
Для задания столбцов и строк сетки нужно использовать свойства grid-template-columns

и grid-template-rows. Эти свойства задаются для контейнера и задают ширину столбцов и высоту строк (в %, px или auto).
grid-template-columns: 300px 400px 300px; //Сделает 3 столбца с заданными размерами.
grid-template-rows: 400px auto; //Сделает 2 строки, на первую выдадут 400 пикселей, на вторую - оставшееся место в контейнере.

Слайд 14

grid-template
Свойство для сокращенной записи grid-template-rows и grid-template-columns
grid-template: grid-template-rows / grid-template-columns

Слайд 15

$fr и repeat fr (fraction) - единица измерения для Grid треков,$

fr и repeat
fr (fraction) - единица измерения для Grid треков, доля.

Если для треков задать размеры в 1fr 2fr - то всё доступное пространство будет разделено на 2 части, причем второй трек будет в 2 раза больше чем первый.
repeat - специальная запись для повторяющихся значений в треках.
repeat(3, 300px);
Аналогично с 300px 300px 300px

Слайд 16

Grid-линии
При задании строк и столбцов создаются Grid-линии (линии нумерации).

Слайд 17

Промежутки между треками
row-gap: расстояние между строками
column-gap: расстояние между столбцами
gap: row-gap column-gap

- два свойства сразу

Слайд 18

Расположение элементов
Свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end задаются для дочерних элементов

сетки и указывают расположение этих элементов.
Для grid-column-start и grid-row-start указывается номер линии начала, для …-end - номер линии конца
grid-column-start: 2;
grid-column-end: 3;
Элемент начнется со второй линии по вертикали и закончится на третьей (будет занимать один столбец).

Слайд 19

Сокращенная запись и span
Для сокращения используются grid-column и grid-row, где начало

и конец записываются через / (начало/конец, или 1/3)
span можно использовать, если нужно указать размеры в треках.
Например, такая запись:
grid-row: 1 / span 2;
Будет указывать, что элемент начинается на линии 1 и занимает 2 строки.

Слайд 20

Выравнивание элемента по ячейке
justify-self: выравнивание вдоль строки. Значения start, end, center,

stretch
align-self: выравнивание вдоль столбца (вертикально). Значения start, end, center, stretch
place-self: align-self justify-self
Два свойства вместе.

Слайд 21

CSS Grid

Содержание

Размеры minmax() - минимальный и максимальный размер трекаminmax(1fr, 200px)

Имена трековПри создании строки или столбца сетки вы можете указать имя:grid-template-row:

grid-template-areasДля упрощения разметки сетки имена также даются и для областей. Для

grid-template-areasВ кавычках записывается строка Grid, внутри которых через пробел записываются имена

grid-areaПрименяется для элементов. Данное свойство используется в двух вариантах:1. Как указание

Выравнивание сеткиСледующие свойства по выравниванию применяются для ВСЕГО КОНТЕЙНЕРАjustify-items: выравнивание по

Размер автострок и автостолбцовКогда ваши элементы появляются за пределами обозначенными сеткой,

Ссылкаhttps://tuhub.ru/posts/css-grid-complete-guide

CSS grid layout

CSS grid layoutЕщё один способ расположения элементов.Grid представляет собой пересекающийся набор

grid tracksДля задания столбцов и строк сетки нужно использовать свойства grid-template-columns

grid-templateСвойство для сокращенной записи grid-template-rows и grid-template-columnsgrid-template: grid-template-rows / grid-template-columns

fr и repeatfr (fraction) - единица измерения для Grid треков, доля.

Grid-линииПри задании строк и столбцов создаются Grid-линии (линии нумерации).

Промежутки между трекамиrow-gap: расстояние между строкамиcolumn-gap: расстояние между столбцамиgap: row-gap column-gap

Расположение элементовСвойства grid-column-start, grid-column-end, grid-row-start и grid-row-end задаются для дочерних элементов

Сокращенная запись и spanДля сокращения используются grid-column и grid-row, где начало

Выравнивание элемента по ячейкеjustify-self: выравнивание вдоль строки. Значения start, end, center,

Дополнительные ссылкиhttps://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layouthttps://fls.guru/grid.html

Похожие презентации