Como criando um sistema de grids responsivos em CSS sem Frameworks

Criar layouts responsivos em CSS ainda é uma tarefa muito complicada para muitos desenvolvedores. Principalmente quando o assunto é Grids/Colunas.

O objetivo desse tutorial é tentar descomplicar essa tarefa e mostrar que nem sempre precisamos de um Framework para fazer nosso trabalho.

Assista a aula sobre sistema de grids responsivos

Agora que você já está familiarizado com o assunto, copie os códigos da aula e pratique bastante!

Baixe os códigos dessa aula

HTML
Esse aquivo HTML serve apenas para nosso exemplo, não é preciso inclui-lo no seu código, mas caso queria, pode usa-lo para fazer testes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Desenvolvendo um Grid System responsivo com CSS</title>
    <link rel="stylesheet" href="grid.css">
</head>
<body>
    <div class="container">
        <!--uma coluna-->
        <div class="row">
            <div class="col">
                <div class="teste">col</div>
            </div>
        </div>
        <!--duas culunas-->
        <div class="row">
            <div class="col col-2">
                <div class="teste">col col-2</div>
            </div>
            <div class="col col-2">
                <div class="teste">col col-2</div>
            </div>
        </div>

        <!--três colunas-->
        <div class="row">
            <div class="col col-3">
                <div class="teste">col col-3</div>
            </div>
            <div class="col col-3">
                <div class="teste">col col-3</div>
            </div>
            <div class="col col-3">
                <div class="teste">col col-3</div>
            </div>
        </div>

        <!--Coluna com sidebar-->
        <div class="row">
            <div class="col col-content">
                <div class="teste">col conteudo</div>
            </div>
            <div class="col col-sidebar">
                <div class="teste">col sidebar</div>
            </div>
        </div>
    </div>
</body>
</html>

 

CSS
Esse é o nosso arquivo CSS e esqueleto do nosso sistema de GRIDs responsivos, lembrando que você pode criar a quantidade que quiser de colunas!

/* reset básico */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* conteiner */
.container  {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}
    @media (min-width: 1170px) {
        .container {
            max-width: 1170px;
            padding: 0;
        }
    }

/* linha */
.row {
    margin-left: -5px;
    margin-right: -5px;
}
    .row:before,
    .row:after {
        content: "";
        display: table;
    }
    .row:after {
        clear: both;
    }

/* colunas */
.col {
    display: inline-block;
    vertical-align: top;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-right: -4px;
    *zoom: 1;
    *display: inline;
}
    /* duas colonas */
    @media (min-width: 480px) {
        .col-2 {
            width: 50%;
        }
    }

    /* tres colunas */
    @media (min-width: 728px) {
        .col-3 {
            width: 33.3333%;
        }
    }

    /* sidebar */
    @media (min-width: 992px) {
        .col-content {
            width: 60%;
        }

        .col-sidebar {
           width: 40%;
        }
    }


/* USAR APENAS PARA DEMOSTRAÇÂO */
.teste {
    background: #f5d5fe;
    padding: 5px;
    text-align: center;
    margin: 2px 0;
    color: #fff;
}
.big {
    height: 50px;
}

 

Ficou com alguma dúvida? deixe nos comentários e não esqueça de se conferir outros tutorias sobre esse assunto >

Tutoriais e dicas do mundo digital

Insira o seu endereço de email abaixo para receber grátis as atualizações do blog, dicas, materiais de estudo e muito mais!>