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

Montando layouts em um mini game

Montando layouts em um mini game

Vamos entrar em um jogo divertido, reviveremos o passado desde as tabelas até um futuro, que na verdade já é o presente chamado CSS Grid Layout. Em cada jogada você vai entender que CSS Grid é uma realidade que vai revolucionar a forma como você desenvolve Layouts.O poder estará em suas mãos, e é claro que você não vai querer ficar pra trás não é mesmo? Let's go.

Simone Amorim

August 11, 2018
Tweet

More Decks by Simone Amorim

Other Decks in Technology

Transcript

  1. Simone Amorim @samorim02(A Dama do CSS) @simoneas02 simoneas02.github.io Mother, Women

    Who Code, Front-end Developer and CSS Evangelist I love running and bike riding.
  2. CSS Layouts ontem? O que fez a cabeça da moçada

    <table> <td></td> </table> .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 adjacente, verticais ou horizontais.
  5. Grid Cells Também conhecida como grid item. É o espaçamento

    entre duas grids lines verticais e duas horizontais.
  6. .container { … } grid-template-columns: 50px 100px 200px; grid-template-columns: 50px

    20% auto; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 200px 300px; grid-template-columns: 1fr 2fr 3fr;
  7. Css3 .A { } grid-column-start: 1; grid-column-end: 3; .A {

    } grid-column: 1 / 3; grid-column: span 2; /* Shorthands */ grid-column: 1 / -1; grid-row: span 3;
  8. .container { … } grid-template-rows: repeat(2, 10%); grid-template-columns: repeat(3, 1fr);

    grid-template-columns: repeat(3, minmax( 250px, 1fr )); repeat() minmax()
  9. .header {grid-area: header;} .content {grid-area: content;} .footer {grid-area: footer;} .container

    { … } grid-template-areas: “header header header” “aside main main” “aside content content”; “footer footer footer”; .aside {grid-area: aside;} .main {grid-area: main;}
  10. @media (max-width: 800px) { } .container { grid-template-areas: “aside header

    header” “aside main main” “aside main main” “content footer footer”; } @media (max-width: 600px) { } .container { grid-template-areas: “header header” “aside main” “content main” “footer footer”; }