Introdução
Neste artigo veremos 3 soluções inteligentes de como organizar suas DIVs em Linhas e colunas.
- Solução 1 – Sistema simples de Grid usando o simple-grid.css.
- Solução 2 – Criando seu próprio CSS.
- Solução 3 – Usando um gerador de CSS.
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>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>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>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.
