Workshop: Dominando CSS Layouts na prática com Grid Layout

Slides Apresentados no Workshop

Acesse o pojeto YouTube Layout online

• História do CSS Layout
• O que é CSS Grid Layout
• CSS Grid Layout x Flexbox
• Terminologia
  • Grid Lines
  • Grid Track
  • Grid Cell
  • Grid Area

Collection Workshop

01 - Definindo um Grid

    display: grid
    display: inline-grid

02 - Line Base Placement

    grid-template-columns: 50px 100px 200px;
    grid-template-rows: 100px 150px;

03 - Line Base Position

    .e {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

04 - Line Base Position - Shorthands

    .e {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }

    .d {
        grid-area: 1 / 1 / 2 / 3;
    }

05 - Grid Gap

    grid-column-gap: 10px;
    grid-row-gap: 20px;

    grid-gap: 10px 20px;

    grid-gap: 20px;

06 - Area Naming

    grid-template-areas:
        "header header header"
        "nav content aside"
        "footer footer footer";

    grid-area: header;
    grid-area: nav;
    grid-area: content;
    grid-area: aside;
    grid-area: footer;

/* Responsive Web Design */

@media(max-width: 590px) {
    .grid-container {
        grid-template-columns: 25% 75%;
        grid-template-rows: 20% 10% 50% 20%;
        grid-template-areas:
        "header header"
        "nav nav"
        "content aside"
        "footer footer";
    }
}

    @media(max-width: 450px) {
    .grid-container {
        grid-template-columns: 100%;
        grid-template-rows: 20% 10% 10% 50% 10%;
        grid-template-areas:
        "header"
        "nav"
        "content" 
        "aside"
        "footer";
    }
}

• Hands On - YouTube Layout
• Suporte
• Quer saber mais