Template com CSS Grid - #5 Responsividade I

Nesse tutorial aprenderemos como aplicar a responsividade no nosso template, ou seja, como deixar o nosso site ajustável nas diferentes resoluções.

CSS Grid Responsível

index.html

Vamos iniciar fazendo pequenos ajustes no header do nosso html:

<header>
    <div class="logo">
        <img src="./img/logo.png" alt="">
    </div>

    <div class="search">
        <input type="search" name="search" id="search" placeholder="Internet Rápida">
        <button><svg class="Cur(p)" width="24" style="fill:#fff;stroke:#fff;stroke-width:0;vertical-align:bottom" height="24" viewBox="0 0 24 24" data-icon="search"><path d="M9 3C5.686 3 3 5.686 3 9c0 3.313 2.686 6 6 6s6-2.687 6-6c0-3.314-2.686-6-6-6m13.713 19.713c-.387.388-1.016.388-1.404 0l-7.404-7.404C12.55 16.364 10.85 17 9 17c-4.418 0-8-3.582-8-8 0-4.42 3.582-8 8-8s8 3.58 8 8c0 1.85-.634 3.55-1.69 4.905l7.403 7.404c.39.386.39 1.015 0 1.403"></path></svg></button>
    </div>

    <div class="button">
        <svg class="Mstart(2px) profile-open_Fill(#fff)! profile-open_D(n) Cur(p)" width="22" style="fill:#979ba7;stroke:#979ba7;stroke-width:0;vertical-align:bottom" height="22" viewBox="0 0 48 48" data-icon="sidebar"><path d="M42.907 13.592h-36c-1.104 0-2-.896-2-2s.896-2 2-2h36c1.104 0 2 .896 2 2s-.895 2-2 2zM42.907 26.593h-36c-1.104 0-2-.896-2-2s.896-2 2-2h36c1.104 0 2 .896 2 2 0 1.102-.895 2-2 2zM42.907 39.593h-36c-1.104 0-2-.896-2-2s.896-2 2-2h36c1.104 0 2 .896 2 2 0 1.102-.895 2-2 2z"></path></svg>
    </div>

    <div class="nav--right">
        <ul>
            <li>Entrar</li>
            <li><svg class="Pos(a) Start(2px) T(4px) Cur(p)" width="26" style="fill:#6001d2;stroke:#6001d2;stroke-width:0;vertical-align:bottom" height="26" viewBox="0 0 24 27" data-icon="bell-fill"><path d="M23.258 20.424c-.09-.07-.81-.662-1.394-1.7-.114-.2-.45-.914-.503-1.06-.143-.39-.243-.864-.398-1.543-.367-2.33-.34-5.656-.34-5.656 0-.076.003-.15.003-.226 0-4.07-2.926-7.465-6.825-8.28v-.19C13.8.788 12.994 0 12 0s-1.8.79-1.8 1.768v.19c-3.897.815-6.822 4.21-6.822 8.28 0 .076.002.15.004.226 0 0 .023 3.325-.344 5.657-.155.68-.255 1.154-.4 1.545-.053.145-.388.86-.502 1.06-.583 1.037-1.304 1.63-1.394 1.7-.315.24-.452.425-.452.425-.18.227-.29.51-.29.82C0 22.406.607 23 1.354 23c.037 0 .073-.004.11-.005h21.07c.037 0 .075.005.112.005.747 0 1.354-.596 1.354-1.33 0-.308-.108-.593-.29-.82 0 0-.137-.184-.452-.426zM12 27c1.657 0 3-1.343 3-3H9c0 1.657 1.343 3 3 3z"></path></svg></li>
            <li><svg class="Mstart(-21px) Mend(6px) Mstart(-11px)--sm1024 Cur(p)" width="28" style="fill:#6001d2;stroke:#6001d2;stroke-width:0;vertical-align:bottom" height="28" viewBox="0 0 512 512" data-icon="NavMail"><path d="M460.586 91.31H51.504c-10.738 0-19.46 8.72-19.46 19.477v40.088l224 104.03 224-104.03v-40.088c0-10.757-8.702-19.478-19.458-19.478M32.046 193.426V402.96c0 10.758 8.72 19.48 19.458 19.48h409.082c10.756 0 19.46-8.722 19.46-19.48V193.428l-224 102.327-224-102.327z"></path></svg><span>Mail</span></li>
        </ul>
    </div>

    <nav>
        <ul>
            <li><svg class="Mstart(-21px) Mend(6px) Mstart(-11px)--sm1024 Cur(p)" width="28" style="fill:#6001d2;stroke:#6001d2;stroke-width:0;vertical-align:bottom" height="28" viewBox="0 0 512 512" data-icon="NavMail"><path d="M460.586 91.31H51.504c-10.738 0-19.46 8.72-19.46 19.477v40.088l224 104.03 224-104.03v-40.088c0-10.757-8.702-19.478-19.458-19.478M32.046 193.426V402.96c0 10.758 8.72 19.48 19.458 19.48h409.082c10.756 0 19.46-8.722 19.46-19.48V193.428l-224 102.327-224-102.327z"></path></svg> Mail</li>
            <li>Coronavírus</li>
            <li>Notícias</li>
            <li>Esporte</li>
        </ul>
    </nav>

    <div class="ads">
        <img src="./img/ads.jpg" alt="">
    </div>
</header>

lib/css/style.css

Agora na nossa folha de estilo faremos o design através de media-queries:

@media screen and (max-width: 480px){
    .container{
        display:grid;
        grid-template-columns: 100%;
        padding: 10px 5%;
        grid-template-areas:
                "header"
                "main"
                "footer"
    ;
    }

    header{
        grid-area: header;
        display:grid;
        grid-template-columns: 10% 30% 45% 10%;
        grid-template-areas:
                "button logo search nav--right"
                "nav nav nav nav"
                "main main main main"
    ;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .logo{grid-area:logo;padding: 0 5%;}

    .search{grid-area:search;padding-right: 2%;}
    .search input[type='search']{display:inline-block;width: 75%;height: 40px;border-radius: 10px 0 0 10px;margin-right: -4px;font-size: 18px;padding: 0 7px;}
    .search button{display:inline-block;width: 25%;height: 40px;margin-left:-4px;border-radius: 0 10px 10px 0;background: #6001D2;border:none;vertical-align: top;cursor:pointer;}
}

Então e isso, por hoje é só! Sucesso nos códigos e na vida!

Está travado nos códigos? Suporte de um especialista: webdesignemfoco@gmail.com