Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Вадим Макеев

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

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Вадим Макеев

  1. 1. Можно вообще всё. Раскладка по гриду M.C.Escher,Relativity
  2. 2. 2
  3. 3. Template Layout 4
  4. 4. Grid Layout 5
  5. 5. 6
  6. 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
  7. 7. Гриды 11
  8. 8. Контейнер
  9. 9. Линия 13
  10. 10. Полоса 15
  11. 11. Ячейка 18
  12. 12. Область 20
  13. 13. Термины — grid container — грид-контейнер — grid item — грид-элемент — grid track — грид-полоса — grid cell — грид-ячейка — grid line — грид-линия — grid area — грид-область Подробнее в словаре терминов по фронтенду. 22
  14. 14. Автоматика 23
  15. 15. 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
  16. 16. #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
  17. 17. 1 2
  18. 18. display: grid; .sample { } 01. 02. 03. 27
  19. 19. 1 2
  20. 20. Колонки 29
  21. 21. .sample 1fr 1fr Пополам { grid-template-columns: ; } 01. 02. 03. 30
  22. 22. 1 2
  23. 23. 1 2 3
  24. 24. 1 2 3 4
  25. 25. 1 2 3 4 5
  26. 26. 1 2 3 4 5 6
  27. 27. .sample 1fr 1fr 1fr На три { grid-template-columns: ; } 01. 02. 03. 36
  28. 28. 1 2 3
  29. 29. 1fr ☛ 1 часть 38
  30. 30. 39
  31. 31. .sample 1fr 2fr 3fr Пропорционально { grid-template-columns: ; } 01. 02. 03. 40
  32. 32. 1 2 3
  33. 33. .sample 250px 1fr 250px Фикс и остальное { grid-template-columns: ; } 01. 02. 03. 42
  34. 34. 1 2 3
  35. 35. Строки 44
  36. 36. .sample columns 1fr rows 1fr Фикс и остальное { grid-template- : 150px 150px; grid-template- : 150px 150px; } 01. 02. 03. 04. 45
  37. 37. 1 2 3 4 5 6 7 8 9
  38. 38. Ручник 47
  39. 39. .sample 1fr 1fr 1fr Три колонки { grid-template-columns: ; } 01. 02. 03. 49
  40. 40. 1 2 3 4 5
  41. 41. .sample 1 / 4 .sample 1 / 4 Шапка и подвал :nth-child(1) { grid-column: ; } :nth-child(5) { grid-column: ; } 01. 02. 03. 04. 05. 06. 51
  42. 42. 1 2 3 4 5
  43. 43. .sample 3 / 4 .sample 1 / 2 Подвал и шапка :nth-child(1) { grid-row: ; } :nth-child(5) { grid-row: ; } 01. 02. 03. 04. 05. 06. 53
  44. 44. .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
  45. 45. 1 2 3 4 5
  46. 46. ASCII Автопортрет! 56
  47. 47. 1 2 3 4 5
  48. 48. .sample 'a a a a' c c 'e e e e' ASCII { grid-template-areas: 'b d' /* Шаблон области */ ; } 01. 02. 03. 04. 05. 06. 58
  49. 49. 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
  50. 50. 1 2 3 4 5
  51. 51. 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
  52. 52. 1 2 3 4 5
  53. 53. .sample 'b c c d' ASCII { grid-template-areas: 'a a a a' 'e e e e'; } 01. 02. 03. 04. 05. 06. 63
  54. 54. .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
  55. 55. 1 2 3 4 5
  56. 56. 1 2 3 4 5
  57. 57. .sample { grid-template-areas: ' ' ' ' ' '; } 01. 02. 03. 04. 05. 06. 67
  58. 58. Так флексы или гриды? Внешние гриды для общей раскладки, смесь вложенных флексов и гридов для компонентов страницы и блочные, инлайновые или табличные элементы, там, где находится текстовое содержимое. Таб Аткинс,www-style “ 68
  59. 59. Ещё? Ещё! — Переводы CSS Live — Grid by Example — CSS Grid Layout Examples — A Complete Guide to Grid — CSS Grid Polyfill 69
  60. 60. sokr.me/grl 70
  61. 61. @pepelsbey 71
  62. 62. Shower 72
  63. 63. Вопросы? 73

×