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対応』

井上拓

March 16, 2018
Tweet

More Decks by 井上拓

Other Decks in Programming

Transcript

  1. <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
  2. IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 1fr 100px auto auto

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


    
 ͜ͷྫͩͱ1ྻ໨͕1/4ɺ2ྻ໨͕1/2ɺ3ྻ໨ ͕1/4ʹͳΔ
  4. 1 2 3 1 2 3 )FBEFS 'PPUFS /BW $POUFOUT

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

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

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

    4JEFCBS -ms-grid-column -ms-grid-row
  8. 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; }
  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. 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
  11. .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
  12. .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
  13. .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
  14. .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