Ads

Introdução

Neste artigo veremos 3 soluções inteligentes de como organizar suas DIVs em Linhas e colunas.

Importante! Este artigo não tem como público interessados em BootStrap. Se você já usa BootStrap em seu site mas está com dificuldades em organizar conteúdos usando o sistema de Grid, recomendo dar uma fuçada neste site – http://shoelace.io/ (é mágico).

Mas, supondo que você não esteja utilizando nenhum tipo de framework em seu site como o BootStrap por exemplo, neste artigo vou lhe ensinar duas maneiras diferentes de organizar conteúdos da sua página usando linhas e colunas.

No final do artigo você vai decidir qual é a melhor alternativa para você, combinado?

Solução 1 – Sistema simples de Grid usando o simple-grid.css

Nesta primeira solução vamos usar uma biblioteca de código já existente, talvez o Simple Grid seja um dos mais fáceis de usar. Tudo que você precisa fazer é o download da biblioteca no site do desenvolvedor – https://simplegrid.io/simple-grid.zip

Ao extrair o arquivo você encontrará uma pasta chamada grid e dentro dela o arquivo simple-grid-min.css e este será o alvo do nosso estudo.

Primeiramente você deverá incorporar este arquivo dentro da sua página HTML usando <link href="grid/simple-grid.min.css" rel="stylesheet">, supondo que a pasta grid esteja na raiz do seu projeto, então teremos algo como;

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu site com colunas</title>
    <link href="grid/simple-grid.min.css" rel="stylesheet">
</head>

<body>
    
</body>
</html>

Agora só precisamos acessar o site https://simplegrid.io/ e seguir as orientações do desenvolvedor, veja como é simples, se você precisar dividir uma linha em duas colunas teremos algo como este código, a ser inserido logo após a tag <body>

<div class="container">
    <div class="row">
        <div class="col-6">
            Olá
        </div>
        <div class="col-6">
            Olá de novo
        </div>
    </div>
</div>
Resultado do código acima.

Vamos a explicação:

A linha <div class="container"> cria uma margem tanto do lado direito como esquerdo da página, isso evita que o conteúdo do seu site fique colocado na borda do navegador, legal né? Experimente remover o <div class="container"> do seu código para ver o resultado.

Já a linha <div class="row"> como o próprio nome em inglês sugere, cria uma linha (row = linha) , se temos uma linha, então é sensato entenderemos que toda linha tem colunas, mesmo que seja uma única coluna.

As linhas <div class="col-6"> criam duas colunas. Usamos o número 6 porque o máximo de colunas que podemos criar usando o simple-grid.css são 12. Portanto, se precisarmos dividir a linha ao meio eu tenho como resultado metade de 12, ou seja, 6.

Seguindo o mesmo raciocínio, podemos dividir a linha em 3 colunas, neste caso devemos dividir o número 12 por 3 e temos como resultado o número 4. Basta usar col-4 para termos o seguinte resultado;

<div class="container">
    <div class="row">
        <div class="col-4">
            Olá
        </div>
        <div class="col-4">
            Olá de novo
        </div>
        <div class="col-4">
            Blogson
        </div>
    </div>
</div>
Resultado do código acima.

Podemos também mesclar tamanho diferentes, veja este outro exemplo;

<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: aquamarine">
            Olá
        </div>
        <div class="col-3" style="background-color: yellow">
            Olá de novo
        </div>
        <div class="col-6" style="background-color: beige">
            Blogson
        </div>
    </div>
</div>
Resultado do código acima

Se você gostou desta solução, deixei um material gratuito de exemplo para você fazer download.

.

Solução 2 – Criando meu próprio CSS.

Esta solução serve bem para aqueles que querem ter total controle do código, embora que, um trabalho extra será necessário para ajustar suas linhas e colunas para dispositivos móveis.

A criação do seu próprio CSS consiste em criar linhas e colunas, tendo assim como resultado o seu próprio sistema de Grid.

1 – Criando a linha

Primeiramente precisamos entender que para organizar o conteúdo em uma página da WEB usamos o conceito de linhas e colunas, perceba que são duas coisas diferentes.

Portanto, para que exista uma coluna é necessário primeiro haver uma linha. O código a seguir permite criar uma linha;

.linha{
display: flex;
flex-flow: row wrap;
}

2. Dividindo uma DIV em colunas

2.1. Criando 2 colunas (50%) na DIV

Para dividir uma DIV em duas colunas, basta considerar que a largura (width) total da tela é de 100%, logo, se queremos duas colunas então teremos outras duas DIVs de 50% de largura cada.

O código CSS a seguir cria uma DIV com 50% de largura.

.coluna-50 {
width: 50%;
}

Aplicação:

Para aplicarmos o código a seguir, não devemos esquecer de primeiramente definirmos uma DIV principal com a classe linha, ficando:

<div class="linha">
<div class="coluna-50">Conteúdo A</div>
<div class="coluna-50">Conteúdo B</div>
</div>

2.2. Criando 3 colunas (33%) na DIV

Como não é possível dividir 100% por 3, vamos adotar o valor de 99%, o múltiplo mais próximo e logo teremos como resultado o valor de 33%. Se você entendeu a classe CSS acima, então verá que não há novidade, basta continuar o raciocínio.

.coluna-33 {
width: 33%;
}

Aplicação:

Para aplicarmos o código a seguir, não devemos esquecer de primeiramente definirmos uma DIV principal com a classe linha, ficando:

<div class="linha">
<div class="coluna-33">Conteúdo A</div>
<div class="coluna-33">Conteúdo B</div>
<div class="coluna-33">Conteúdo C</div>
</div>

2.3. Criando 4 colunas (20%) na DIV

Bem, agora você com certeza pegou a manha certo? Podemos a partir daqui criarmos quantos colunas quisermos. Se quiser 4 colunas, basta usar o valor de 20%

.coluna-20 {
width: 20%;
}

Aplicação:

<div class="linha">
<div class="coluna-20">Conteúdo A</div>
<div class="coluna-20">Conteúdo B</div>
<div class="coluna-20">Conteúdo C</div>
<div class="coluna-20">Conteúdo D</div>
</div>

Exemplo completo funcionando

Se você gostou deste solução, deixei um exemplo funcionando. Basta clicar no botão abaixo;

.

Solução 3 – Usando um Gerador de CSS

O site Responsive Gride System oferece uma calculadora de sistema de grid, aonde você pode definir a quantidade de colunas desejadas e gerar um CSS curto e prático para implementar em seu site.

O site responsivegridsystem.com gera o código CSS para que você crie seu próprio sistema de Grid.
Ads

Anderson Oliveira

Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.