Contenu connexe Similaire à Вадим Макеев (20) Вадим Макеев22. Термины
— grid container — грид-контейнер
— grid item — грид-элемент
— grid track — грид-полоса
— grid cell — грид-ячейка
— grid line — грид-линия
— grid area — грид-область
Подробнее в словаре терминов по фронтенду.
22
25. #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
51. .sample
1 / 4
.sample
1 / 4
Шапка и подвал
:nth-child(1) {
grid-column: ;
}
:nth-child(5) {
grid-column: ;
}
01.
02.
03.
04.
05.
06.
51
53. .sample
3 / 4
.sample
1 / 2
Подвал и шапка
:nth-child(1) {
grid-row: ;
}
:nth-child(5) {
grid-row: ;
}
01.
02.
03.
04.
05.
06.
53
54. .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
58. .sample
'a a a a'
c c
'e e e e'
ASCII
{
grid-template-areas:
'b d' /* Шаблон области */
;
}
01.
02.
03.
04.
05.
06.
58
59. 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
61. 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
63. .sample
'b c c d'
ASCII
{
grid-template-areas:
'a a a a'
'e e e e';
}
01.
02.
03.
04.
05.
06.
63
64. .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
68. Так флексы или гриды?
Внешние гриды для общей раскладки, смесь вложенных флексов и гридов для
компонентов страницы и блочные, инлайновые или табличные элементы,
там, где находится текстовое содержимое.
Таб Аткинс,www-style
“
68
69. Ещё? Ещё!
— Переводы CSS Live
— Grid by Example
— CSS Grid Layout Examples
— A Complete Guide to Grid
— CSS Grid Polyfill
69