Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Grid Layout Module

2d1275668d7b6a47d4e29415994313b8?s=47 井上拓
August 19, 2017

CSS Grid Layout Module

フロントエンド夏祭り in 広島でのLT

2d1275668d7b6a47d4e29415994313b8?s=128

井上拓

August 19, 2017
Tweet

More Decks by 井上拓

Other Decks in Technology

Transcript

  1. None
  2. CSS Grid Layout Module Ҫ্ ୓

  3. CSS Grid Layout Moduleͱ͸

  4. CSS Grid Layout Moduleͱ͸ • CSS3Ͱࡦఆ͕ਐΊΒΕ͍ͯΔɺFlexible Box Layout Moduleʹ͙࣍৽ͨͳϨΠΞ΢τϞ δϡʔϧɻ

    • ίϯςφΛॎԣͷ֨ࢠঢ়ʹ෼ׂͯ͠ཁૉΛࣗ ༝ʹ഑ஔग़དྷΔ
  5. CSS Grid Layout Module Ҫ্ ୓

  6. ϒϥ΢β࣮૷ঢ়گ

  7. ϒϥ΢β࣮૷ঢ়گ • Ϟμϯϒϥ΢β͸جຊతʹ࣮૷ࡁΈ

  8. ʊਓਓਓਓਓਓਓʊ ʼɹ ҆ఆͷIEɹ ʻ ʉY^Y^Y^Y^Y^Yʉ

  9. ॻ͖ํ

  10. IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ

  11. <div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item

    item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
  12. .container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px

    30px; grid-gap: 10px; } CSS
  13. IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 100px 100px 30px 30px

    30px grid-template-columns grid-template-rows
  14. .item_header, .item_footer{ grid-column: 1/4; } CSS

  15. ʊਓਓਓਓਓਓਓʊ ʼɹ 1/4?? ɹ ʻ ʉY^Y^Y^Y^Y^Yʉ

  16. 1 2 3 4 1 2 3 4

  17. 1 2 3 4 1 2 3 4

  18. ɹ͜ͷฆΒΘ͍͠ॻ͖ํ Ͳ͏ʹ͔ͳΒͳ͍ͷʁ

  19. <div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item

    item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
  20. .item_header{grid-area: header;} .item_nav{grid-area: nav;} .item_main{grid-area: main;} .item_sidebar{grid-area: sidebar;} .item_footer{grid-area: footer;}

    CSS
  21. .container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 30px 30px

    30px; grid-gap: 10px; CSS
  22. grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”;

    } CSS
  23. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ ಥવͷΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ

  24. ௚ײతͰݟ΍͍͢

  25. Flexible Box Layout Module ͱ CSS Grid Layout Module

  26. Ͳ͕͍͍ͬͪͷ • ௚ઢతͳ഑ஔ͸Flexible Box Layout Module • ෳࡶͳ഑ஔ͸CSS Grid Layout

    Module
  27. ·ͱΊ

  28. ·ͱΊ • Ϟμϯϒϥ΢β͸࣮૷ࡁΈͳͷͰɺ΋͏࢖ͬ ͯେৎ෉ • ΞεΩʔΞʔτͷΑ͏ͳهड़Ͱɺཁૉͷ഑ஔ͕ ؆୯͔ͭݟ΍͍͢

  29. ஫ҙ • IEʹ͸ϕϯμʔϓϨϑΟοΫε͕ඞཁ • autoprefixer͕·ͩ෦෼తʹ͔͠ରԠͯ͠ͳ͍

  30. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠