Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)

207 views

Published on

РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 5 июня, 10:00

Тезисы:
http://frontendconf.ru/2017/abstracts/2585.html

Про Grid Layout сказано уже много. Большое количество статей, примеров, инструментов. Однако только сейчас мы можем начинать свободно пользоваться этой спецификацией. Пора заканчивать читать справочники и начинать использовать Гриды в реальном мире.

Мы посмотрим, в каком состоянии сейчас находится технология, какая поддержка, что уже сделано и сказано про Grid Layout. Разберём несколько реальных практических примеров тех свойств, которые уже сейчас отлично поддерживаются и готовы к работе. Разберём, что ждёт спецификацию в ближайшее время, и в какую сторону она будет развиваться.

Published in: Engineering
  • Be the first to comment

Пора начинать фыркать – Grid Layout уже здесь / Сергей Попов (Setka)

  1. 1. Пора начинать фыркать* * Grid Layout
  2. 2. 1 фыр = 1 fr = 1 fraction неизвестный художник
  3. 3. Piet Mondrian – Composition with Large Blue Plane, Red, Black, Yellow, and Gray 1921 год – Холст, масло
  4. 4. Jen Simmons – Responsive Mondrian 2017 год – HTML, CSS
  5. 5. Обо мне 5 Сергей Попов - Фронтенд разработчик - Верстаю 7 лет - Организую moscowcss
  6. 6. План 6 - Почему Grid Layout? - Самое интересное
  7. 7. 7 Почему вообще Grid Layout?
  8. 8. 8 Мощно!
  9. 9. 9 Гибко!
  10. 10. 10 Масштабно!
  11. 11. 11 «Можно вообще всё»
  12. 12. 12 О них вообще везде!
  13. 13. ГРИДЫ!
  14. 14. ГРИДЫ! ГРИДЫ!
  15. 15. ГРИДЫ! ГРИДЫ! ГРИДЫ!
  16. 16. ГРИДЫ! ГРИДЫ! ГРИДЫ! ГРИДЫ!
  17. 17. Почему сейчас? Сальвадор Дали – Постоянство памяти 1931 год
  18. 18. А если серьёзно?
  19. 19. Они уже здесь - март 34
  20. 20. Они уже здесь – май 35
  21. 21. 36 Они уже здесь – май
  22. 22. 37 Они уже здесь – июнь
  23. 23. Что есть посмотреть? - Доклад Вадима Макеева «Можно вообще всё. Раскладка
 по гриду» - A Complete Guide to Grid - Grid by Example - Статьи по Grid Layout на CSS-Live - Сайт с примерами раскладки от Jen Simmons - Работа с Grid Layout в Firefox 52 DevTools - … 38
  24. 24. Хватит читать! Начинайте использовать
  25. 25. Самое интересное! - Grid Template Areas - Grid auto-flow 40
  26. 26. Grid Template Areas 41
  27. 27. Grid Template Areas header sidebar content footer 42
  28. 28. Grid Template Areas header sidebar content footer 43 =>
  29. 29. Grid Template Areas <= > 940px< 940px 44
  30. 30. Grid Template Areas <= > 940px45< 640px
  31. 31. Делаем Илья Репин – Бурлаки на Волге 1873 год
  32. 32. Илья Репин – Бурлаки на Волге 1873 год47
  33. 33. Илья Репин – Бурлаки на Волге 1873 год48
  34. 34. Илья Репин – Бурлаки на Волге 1873 год49
  35. 35. Илья Репин – Бурлаки на Волге 1873 год50
  36. 36. Илья Репин – Бурлаки на Волге 1873 год51
  37. 37. Илья Репин – Бурлаки на Волге 1873 год52
  38. 38. Илья Репин – Бурлаки на Волге 1873 год53
  39. 39. Илья Репин – Бурлаки на Волге 1873 год54
  40. 40. Илья Репин – Бурлаки на Волге 1873 год55
  41. 41. Илья Репин – Бурлаки на Волге 1873 год56
  42. 42. Илья Репин – Бурлаки на Волге 1873 год57
  43. 43. Илья Репин – Бурлаки на Волге 1873 год58
  44. 44. Илья Репин – Бурлаки на Волге 1873 год59
  45. 45. Grid auto-flow 60
  46. 46. Grid auto-flow 61 grid-template-columns: 
 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-auto-flow: dense; 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6
  47. 47. Grid auto-flow 62 nth-child(3) { grid-column: 1 / 6; } 1 2 4 5 6 7 8 9 1 2 3 4 5 6 3
  48. 48. Grid auto-flow 63 nth-child(2, 6, 9) { grid-column: auto / span 2; } 1 2 4 5 6 7 1 2 3 4 5 6 3 8 9
  49. 49. Grid auto-flow 64 nth-child(7, 8) { grid-row: auto / span 2; } 1 2 4 5 6 7 1 2 3 4 5 6 3 8 9
  50. 50. Делаем Ван Гог – Две женщины на вересковой пустоши 1883 год
  51. 51. Ван Гог – Две женщины на вересковой пустоши 1883 год
  52. 52. Ван Гог – Две женщины на вересковой пустоши 1883 год
  53. 53. Ван Гог – Две женщины на вересковой пустоши 1883 год68
  54. 54. Ван Гог – Две женщины на вересковой пустоши 1883 год69
  55. 55. Ван Гог – Две женщины на вересковой пустоши 1883 год70
  56. 56. Ван Гог – Две женщины на вересковой пустоши 1883 год71
  57. 57. Ван Гог – Две женщины на вересковой пустоши 1883 год72
  58. 58. Ван Гог – Две женщины на вересковой пустоши 1883 год73
  59. 59. Ван Гог – Две женщины на вересковой пустоши 1883 год74
  60. 60. Ван Гог – Две женщины на вересковой пустоши 1883 год75
  61. 61. Ван Гог – Две женщины на вересковой пустоши 1883 год76
  62. 62. Ван Гог – Две женщины на вересковой пустоши 1883 год
  63. 63. Но проблемы-то есть? - Баги - Спецификация - Мобильные браузеры - Десктопные браузеры 78
  64. 64. Мобильные браузеры грустят подтягиваются 79
  65. 65. Десктопные браузеры 80
  66. 66. Или динозавры – или Гриды Pixar – Хороший динозавр 2015 год
  67. 67. ИЛИ Pixar – Хороший динозавр 2015 год
  68. 68. 83 @supports (display: grid) { .grid { display: grid; } } @supports not (display: grid) { .grid { display: flex; } }
  69. 69. Support of supports() 84
  70. 70. Если и этого вам кажется мало Pixar – Хороший динозавр 2015 год
  71. 71. float вам в руки Мария Kurara – Поплавок 2015 год
  72. 72. «…чтобы сделать первые шаги в Grid Layout, достаточно знать лишь часть» – Chris Wright http://css-live.ru/articles/znakomstvo-s-css-grid-layout.html
  73. 73. Спасибо за внимание! Вопросы? twitter: sergeytovarov facebook: sergeytovarov

×