Вадим Макеев
TRANSCRIPT
Можно вообще всё.Раскладка по гриду
M. C
. Esc
her,
Rela
tivity
2
6
Включаем— Opera: opera://flags/#enable-experimental-web-platform-features
— Chrome: chrome://flags/#enable-experimental-web-platform-features
— Firefox: about:config — layout.css.grid.enabled
10
Гриды11
Контейнер
Линия
13
Полоса
15
Ячейка
18
Область
20
Термины— grid container — грид-контейнер
— grid item — грид-элемент
— grid track — грид-полоса
— grid cell — грид-ячейка
— grid line — грид-линия
— grid area — грид-область
Подробнее в словаре терминов по фронтенду.
22
Автоматика
23
sample
sample__item
sample__item
sample__item
sample__item
sample__item
Заготовка<div class=" ">
<div class=" "></div>
<div class=" "></div>
<div class=" "></div>
<div class=" "></div>
<div class=" "></div>
</div>
01.
02.
03.
04.
05.
06.
07.
24
#0175A7
:first-child #090
:last-child #C00
::before counter(list)
Заготовка.sample { /* Пока пусто */ }
.sample__item {
background: ;
}
.sample__item { background: }
.sample__item { background: }
.sample__item { content: }
01.
02.
03.
04.
05.
06.
07.
25
1
2
display: grid;
.sample {
}
01.
02.
03.
27
1
2
Колонки
29
.sample
1fr 1fr
Пополам {
grid-template-columns: ;
}
01.
02.
03.
30
1 2
1 2
3
1 2
3 4
1 2
3 4
5
1 2
3 4
5 6
.sample
1fr 1fr 1fr
На три {
grid-template-columns: ;
}
01.
02.
03.
36
1 2 3
1fr ☛ 1 часть
38
фыр-фыр-фыр
39
.sample
1fr 2fr 3fr
Пропорционально {
grid-template-columns: ;
}
01.
02.
03.
40
1 2 3
.sample
250px 1fr 250px
Фикс и остальное {
grid-template-columns: ;
}
01.
02.
03.
42
1 2 3
Строки
44
.sample
columns 1fr
rows 1fr
Фикс и остальное {
grid-template- : 150px 150px;
grid-template- : 150px 150px;
}
01.
02.
03.
04.
45
1 2 3
4 5 6
7 8 9
Ручник
47
.sample
1fr 1fr 1fr
Три колонки {
grid-template-columns: ;
}
01.
02.
03.
49
1 2 3
4 5
.sample
1 / 4
.sample
1 / 4
Шапка и подвал :nth-child(1) {
grid-column: ;
}
:nth-child(5) {
grid-column: ;
}
01.
02.
03.
04.
05.
06.
51
1
2 3 4
5
.sample
3 / 4
.sample
1 / 2
Подвал и шапка :nth-child(1) {
grid-row: ;
}
:nth-child(5) {
grid-row: ;
}
01.
02.
03.
04.
05.
06.
53
.sample
3 / 1 / 4 / 4
.sample
1 / 1 / 2 / 4
Подвал и шапка :nth-child(1) {
grid-area: ;
}
:nth-child(5) {
grid-area: ;
}
01.
02.
03.
04.
05.
06.
54
1
2 3 4
5
1
2
3
4
5
.sample
'a a a a'
c c
'e e e e'
ASCII {
grid-template-areas:
'b d' /* Шаблон области */
;
}
01.
02.
03.
04.
05.
06.
58
1 a
2 b
3 c
4 d
5 e
A B C D E.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
01.
02.
03.
04.
05.
59
1
2 3 4
5
1 b
2 a
3 e
4 c
5 d
B A E C D.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
.sample :nth-child() { grid-area: }
01.
02.
03.
04.
05.
61
1
2
3
4
5
.sample
'b c c d'
ASCII {
grid-template-areas:
'a a a a'
'e e e e';
}
01.
02.
03.
04.
05.
06.
63
.sample
'b c c d'
'b c c d'
ASCII {
grid-template-areas:
'a a a a'
'e e e e';
}
01.
02.
03.
04.
05.
06.
07.
64
1
2 3 4
5
1
2 3 4
5
.sample {
grid-template-areas:
'� � � �'
'� � � �'
'� � � �';
}
01.
02.
03.
04.
05.
06.
67
Так флексы или гриды?Внешние гриды для общей раскладки, смесь вложенных флексов и гридов для
компонентов страницы и блочные, инлайновые или табличные элементы,
там, где находится текстовое содержимое.
Таб Аткинс, www-style
“68
Ещё? Ещё!— Переводы CSS Live
— Grid by Example
— CSS Grid Layout Examples
— A Complete Guide to Grid
— CSS Grid Polyfill
69
Вопросы?
73