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

CSS Grid Layout

CSS Grid Layout

Uma simples introdução sobre CSS Grid Lyout.

Simone Amorim

April 12, 2017
Tweet

More Decks by Simone Amorim

Other Decks in Technology

Transcript

  1. Mother, WWcode Leader and studying for become a Front-End Developer

    and CSS Evangelist <3 I love running and ride a bike! Simone Amorim @samorim02 @simoneas02 simoneas02.github.io https://www.womenwhocode.com/ https://csshortcut.github.io/front-end-na-pratica.html https://willianjusten.com.br/js-com-tdd-na-pratica-e-novidades/
  2. CSS Layouts ontem? <table> <td></td> </table> O que fez a

    cabeça da moçada <3 .box { display: inline-block; } .box { float: left; } .container { display: flex; }
  3. Um modulo CSS3 que define um grid otimizado para interfaces

    CSS Grid Layout CSS Grid Layout Module Level 1 w3.org/TR/css3-grid-layout/
  4. Grid Track É o termo genérico para o espaço entre

    duas grid lines, verticais ou horizontais.
  5. Grid Cells Também conhecida como grid item. É o espaçamento

    entre duas line grids verticais e duas horizontais.
  6. <div class=“grid-container”> </div> HTML básico <div class=“grid-item”>A</div> <div class=“grid-item”>B</div> <div

    class=“grid-item”>F</div> <div class=“grid-item”>E</div> <div class=“grid-item”>D</div> <div class=“grid-item”>C</div>
  7. .grid-container { display: grid; } grid-template-rows: 100px 100px; grid-template-columns: 120px

    120px 120px; A B C D E F 1 column 2 column 3 column 2 row 1 row 3 row 100px;
  8. .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end:

    2; .f { } grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; B C D A E F
  9. .a { } grid-column: 1 / 2; grid-row: 1 /

    2; .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .a { } grid-area: 1 / 1 / 2 / 2; B C D A E F
  10. .a {grid-area: header;} .b {grid-area: aside;} .c {grid-area: main;} .d

    {grid-area: content;} .grid-container { display: grid; grid-template-rows: auto; grid-template-columns: auto; grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; } main header content aside footer .e {grid-area: footer;}
  11. main header content aside footer @media (max-width: 666px) { }

    … grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; … .grid-container { grid-template-areas: “aside header header” “aside main main” “aside main main” “content footer footer”; } main header content aside footer
  12. Quer Saber mais? A curated list of CSS Grid Layout

    Module or only Css Grid https://github.com/simoneas02/awesome-grid-layout