Вадим Макеев Opera Software Можно вообще всё. Раскладка по гриду

1. Можно вообще всё.
Раскладка по гриду
M.C.Escher,Relativity

2. 2

4. Template Layout
4

5. Grid Layout
5

6. 6

10. Включаем
— 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. Гриды
11

12. Контейнер

13. Линия
13

15. Полоса
15

18. Ячейка
18

20. Область
20

22. Термины
— grid container — грид-контейнер
— grid item — грид-элемент
— grid track — грид-полоса
— grid cell — грид-ячейка
— grid line — грид-линия
— grid area — грид-область
Подробнее в словаре терминов по фронтенду.
22

23. Автоматика
23

24. 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

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

26. 1
2

27. display: grid;
.sample {
}
01.
02.
03.
27

28. 1
2

29. Колонки
29

30. .sample
1fr 1fr
Пополам
{
grid-template-columns: ;
}
01.
02.
03.
30

31. 1 2

32. 1 2
3

33. 1 2
3 4

34. 1 2
3 4
5

35. 1 2
3 4
5 6

36. .sample
1fr 1fr 1fr
На три
{
grid-template-columns: ;
}
01.
02.
03.
36

37. 1 2 3

38. 1fr ☛ 1 часть
38

39. 39

40. .sample
1fr 2fr 3fr
Пропорционально
{
grid-template-columns: ;
}
01.
02.
03.
40

41. 1 2 3

42. .sample
250px 1fr 250px
Фикс и остальное
{
grid-template-columns: ;
}
01.
02.
03.
42

43. 1 2 3

44. Строки
44

45. .sample
columns 1fr
rows 1fr
Фикс и остальное
{
grid-template- : 150px 150px;
grid-template- : 150px 150px;
}
01.
02.
03.
04.
45

46. 1 2 3
4 5 6
7 8 9

47. Ручник
47

49. .sample
1fr 1fr 1fr
Три колонки
{
grid-template-columns: ;
}
01.
02.
03.
49

50. 1 2 3
4 5

51. .sample
1 / 4
.sample
1 / 4
Шапка и подвал
:nth-child(1) {
grid-column: ;
}
:nth-child(5) {
grid-column: ;
}
01.
02.
03.
04.
05.
06.
51

52. 1
2 3 4
5

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

55. 1
2 3 4
5

56. ASCII
Автопортрет!
56

57. 1
2
3
4
5

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

60. 1
2 3 4
5

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

62. 1
2
3
4
5

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

65. 1
2 3 4
5

66. 1
2 3 4
5

67. .sample {
grid-template-areas:
' '
' '
' ';
}
01.
02.
03.
04.
05.
06.
67

68. Так флексы или гриды?
Внешние гриды для общей раскладки, смесь вложенных флексов и гридов для
компонентов страницы и блочные, инлайновые или табличные элементы,
там, где находится текстовое содержимое.
Таб Аткинс,www-style
“
68

69. Ещё? Ещё!
— Переводы CSS Live
— Grid by Example
— CSS Grid Layout Examples
— A Complete Guide to Grid
— CSS Grid Polyfill
69

70. sokr.me/grl
70

71. @pepelsbey
71

72. Shower
72

73. Вопросы?
73