Introdução
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;
