Wtricks • Tutoriais e Dicas do Mundo Digital

Como criar seu próprio Grid System Responsivo em CSS sem usar Frameworks

Aprenda como criar seu próprio Grid System Responsivo com CSS, uma opção muito mais performática em relação aos Frameworks CSS

Por: Carlos Sabo Cantanzaro • 19 fevereiro às 15:44 na Categoria: CSS comentários
A+ A- T T T OpenDyslexic

Usar frameworks para desenvolver suas aplicações web, pode ser uma solução simples e muito inteligente quando se tem um prazo apertado para um projeto.

Porém, quando estamos em busca de performance, criar suas próprias ferramentas pode ser uma opção ainda mais inteligente!

O Grid System é usado para criar colunas responsivas em CSS, possibilitando que seu usuário tenha uma boa navegação em sua aplicação, tanto usando um desktop, quando um dispositivo móvel.

Por que não usar um Framework CSS?

Quero primeiramente deixar claro que não sou contra o uso de frameworks, muito pelo contrário, acredito que dominar o uso dessas ferramentas é algo muito inteligente!

Porém, muito mais do que saber usar a ferramenta, temos que saber no que estamos mexendo! Quando usamos framework estamos colocando uma caixa de ferramentas inteira no nosso site, quando as vezes, tudo que precisamos é só de uma chave de fenda!

Ou seja, se a única coisa que eu preciso de um framework é o Grid System, não é viável colocar todo um amontoado de código na minha aplicação! Isso só faria meu site consumir mais banda, entregando uma navegação mais lenta para meus usuários.

Então está liberado o uso de frameworks, mas acredito que depois desse tutorial, você irá repensar duas vezes se realmente precisa de um!

Caso fique com alguma dúvida, use os comentários, irei responder todo mundo assim que possível!

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;
}

DEIXE SEU COMENTÁRIO