Como Dividir uma DIV em 2, 3, 4 ou mais colunas

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

Dividindo uma DIV em colunas

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>

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>

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>

Deixe seu comentário