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

CSS Grid Layout Module

CSS Grid Layout Module

広島フロントエンド勉強会 Vol.17『CSS Grid Layout Module IE対応』

2d1275668d7b6a47d4e29415994313b8?s=128

井上拓

March 16, 2018
Tweet

More Decks by 井上拓

Other Decks in Programming

Transcript

  1. CSS Grid Layout Module Ҫ্ ୓

  2. CSS Grid Layout Moduleͱ͸

  3. CSS Grid Layout Moduleͱ͸ • 2࣍ݩϨΠΞ΢τΛ࣮ݱ͢ΔCSSϓϩύςΟ • άϦουʹԊͬͯɺ޷͖ͳॱ൪ʹ഑ஔͨ͠Γ ݁߹ͨ͠ΓͰ͖Δ

  4. CSS Grid Layout Module Ҫ্ ୓

  5. ϒϥ΢β࣮૷ঢ়گ

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

  7. ॻ͖ํ

  8. IFBEFS OBW NBJO TJEFCBS GPPUFS දࣔ݁Ռ

  9. <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
  10. .container{ display: grid; } CSS

  11. None
  12. .container{ display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: auto auto

    auto; } CSS
  13. IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 1fr 100px auto auto

    auto grid-template-columns grid-template-rows
  14. fr • ૬ର୯Ґ • 1fr͸ར༻Մೳͳۭؒͷׂ߹ • grid-template-columns: 1fr 2fr 1fr;


    
 ͜ͷྫͩͱ1ྻ໨͕1/4ɺ2ྻ໨͕1/2ɺ3ྻ໨ ͕1/4ʹͳΔ
  15. None
  16. .item_header, .item_footer{ grid-column: 1/4; } CSS

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

  18. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT

    4JEFCBS 4 4 grid-template-columns grid-template-rows
  19. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT

    4JEFCBS 4 4 grid-template-columns grid-template-rows
  20. None
  21. None
  22. IE11ʹରԠͤ͞Δ

  23. IE11ରԠ .container{ display: -ms-grid; -ms-grid-columns: 100px 1fr 100px; -ms-grid-rows: 1fr

    1fr 1fr; }
  24. None
  25. None
  26. IE11ରԠ .item_header{ -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 3; }

  27. IE11ରԠ .item_footer{ -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 3; }

  28. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT

    4JEFCBS 4 4 grid-template-columns grid-template-rows
  29. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT

    4JEFCBS -ms-grid-column -ms-grid-row
  30. None
  31. IE11ରԠ .item_nav{ -ms-grid-column: 1; -ms-grid-row: 2; } .item_main{ -ms-grid-column: 2;

    -ms-grid-row: 2; } .item_sidebar{ -ms-grid-column: 3; -ms-grid-row: 2; }
  32. None
  33. display: grid; display: -ms-grid; grid-template-columns: -ms-grid-columns: grid-template-rows: -ms-grid-rows: ηϧͷ݁߹ -ms-grid-column-span:

    grid-row -ms-grid-row: grid-column -ms-grid-column:
  34. ಛघͳॻ͖ํ

  35. repeat • ܁Γฦ͠ಉ͡஋Λهड़Ͱ͖Δ • repeat(ճ਺, ஋)

  36. .container{ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }

    CSS
  37. .container{ grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); } CSS

  38. grid-template-areas • ΞΠςϜʹ໊લΛ͚ͭͯɺࢹ֮తʹΘ͔Γ΍͢ ͘هड़Ͱ͖Δɻ

  39. <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
  40. .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
  41. .container{ display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: auto auto

    auto; CSS
  42. grid-template-areas: "header header header" "nav main sidebar" "footer footer footer”;

    } CSS
  43. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ·ΔͰΞεΩʔΞʔτɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ

  44. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹɹ ɹIE11ඇରԠɹ ɹɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^ʉ

  45. ͱࢥ͍ͬͯͨΒ

  46. None
  47. ࢼͯ͠Έͨ

  48. gulp.task('sass', () =>{ gulp.src(cmnpath + 'sass/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(autoprefixer({ browsers:

    [ 'last 2 versions' ], grid: true, cascade: false })) .pipe(gulp.dest(cmnpath + 'css')) .pipe(browserSync.stream()); }); HVMQpMFKT
  49. .container{ max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 100px

    1fr 100px; grid-template-rows: 1fr 1fr 1fr; } .item_header,.item_footer{ grid-column: 1/4; } 4$44
  50. .container { max-width: 600px; margin: 0 auto; display: -ms-grid; display:

    grid; -ms-grid-columns: 100px 1fr 100px; grid-template-columns: 100px 1fr 100px; -ms-grid-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .item_header, .item_footer { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/4; } $44
  51. None
  52. None
  53. .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; } .container{ max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "header header header" "nav main sidebar" "footer footer footer"; } 4$44
  54. .item_sidebar { -ms-grid-row: 2; -ms-grid-column: 3; grid-area: sidebar; } .item_footer

    { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: footer; } .container { max-width: 600px; margin: 0 auto; display: -ms-grid; display: grid; -ms-grid-columns: 100px 1fr 100px; grid-template-columns: 100px 1fr 100px; -ms-grid-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "header header header” "nav main sidebar” "footer footer footer"; } .item_header { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: header; } .item_nav { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: nav; } .item_main { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: main; } $44
  55. None
  56. None
  57. ·ͱΊ

  58. ·ͱΊ • ϨΠΞ΢τ͕͍ͩͿָʹͭ͘ΕΔ • BootstrapΈ͍ͨʹHTML͕ԚΕͳ͍

  59. ·ͱΊ • autoprefixer͕͍ͭͷؒʹ͔ਐԽ͍ͯͨ͠ɻ • autoprefixer࢖͏ͳΒgrid-template-areasΛ࢖ ͏ํ͕͍͍