3

Eu gostaria de organizar minhas divs em forma de coluna, porém não lado a lado, mas sim uma sobre a outra. Normalmente ao usar float: left ou display: inline-block os elementos são colocados lado a lado até o limite de tamanho, e então uma nova linha é criada, exemplo:

|DIV 1|   |DIV 2|   |DIV 3|

|DIV 4|   |DIV 5|   |DIV 6|

|DIV 6|   |DIV 7|   |DIV 8|

Porém eu gostaria que elas ficassem assim:

|DIV 1|   |DIV 4|   |DIV 7|

|DIV 2|   |DIV 5|   |DIV 8|

|DIV 3|   |DIV 6|   |DIV 9|

Não quero ter que criar colunas diversas e colocar cada div ali, quero que elas se auto organizem deste modo, como posso fazer?

2
  • sempre 3 colunas?
    – Sam
    Commented 19/07/2018 às 0:01
  • ou em mais, depende da quantidade de elementos que serão criados de forma dinâmica, mas para efeitos de resposta se for preciso, sim pode assumir que são 3
    – Leo Letto
    Commented 19/07/2018 às 0:15

3 Respostas 3

1

Vc pode usar a propriedade column-count e definir quantas colunas vc quer, no exemplo coloquei 3 colunas. A propriedade tenta sempre otimizar a distribuição de forma automatizada entre todas as três colunas, independente da quantidade de divs que vc tem dentro.

Aqui tem a documentação da Mozilla sobre essa propriedade https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

Veja o exemplo pra entender melhor:

.colunas {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
<div class="colunas">
    <div>DIV 1</div>
    <div>DIV 2</div>
    <div>DIV 3</div>
    <div>DIV 4</div>
    <div>DIV 5</div>
    <div>DIV 6</div>
    <div>DIV 7</div>
    <div>DIV 8</div>
    <div>DIV 9</div>
</div>

DICA:

Inclusive é super facil de fazer as colunas ficarem responsivas, pois vc pode mudar esse número dependendo da largura da tela. No modelo abaixo quando a tela for menor que 768px passa de 3 para 2 colunas

.colunas {
    -webkit-column-count: 3; /
    -moz-column-count: 3; 
    column-count: 3;
}

@media screen and (max-width: 768px) {
    .colunas {
        -webkit-column-count: 2; 
        -moz-column-count: 2; 
        column-count: 2;
    }
}

OBS:

  • Com display:flex vc precisa definir uma altura pro container
  • Com column-count vc não precisa definir altura do elemento pai ou número de rows
  • Com display:grid vc precisa definir um número de rows automático, assim como a largura, pode ser uma opção a se considerar
2
  • Como lidar com problemas como esse, onde parte do elemento foi enviado para a próxima coluna? imgur.com/a/l2Nh6cA ... A propósito gostei muito da solução, valeu mesmo
    – Leo Letto
    Commented 24/07/2018 às 1:33
  • 1
    Olhando no exemplo que fiz para corrigir isso vc tem que nas divs que estão dentro da div pai com a classe .colunas vc tem que coloca a propriedade break-inside: avoid-column; tipo assim: .colunas > div { break-inside: avoid-column; } Isso deve evitar que o conteúdo se quebre entre uma coluna e outra.
    – hugocsl
    Commented 24/07/2018 às 2:31
1

Se você souber o valor da altura que deve ter o cantainer, pode fazer assim:

body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 60px;
}
<body>
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
  <div>DIV 4</div>
  <div>DIV 5</div>
  <div>DIV 6</div>
  <div>DIV 7</div>
  <div>DIV 8</div>
  <div>DIV 9</div>
</body>

para aumentar e diminuir a quantidade de colunas basta mudar o height

-2

O que está acontecendo amigo, é que você não está usando a estrutura html adequada pra fazer isso, float não é uma boa ideia, use o display: inline-block que é melhor.

Para conseguir este layout, precisa estruturar seu html pra isso, segue um exemplo de como fazer

.wrapper {
  display:block;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.wrapper .column {
  display: inline-block;
  width: 32%;
}

.column div {
  width: 90%;
  background: #ccc;
  text-align: center;
  margin: 10%;
}
<div class="wrapper">
  <div class="column">
    <div>
      1
    </div>
    <div>
      2
    </div>
    <div>
      3
    </div>
  </div>
  <div class="column">
    <div>
      4
    </div>
    <div>
      5
    </div>
    <div>
      6
    </div>
  </div>
  <div class="column">
    <div>
      7
    </div>
    <div>
      8
    </div>
    <div>
      9
    </div>
  </div>
</div>

1
  • Como eu disse na pergunta, eu não gostaria de ter que criar manualmente cada nova coluna com suas respectivas divs
    – Leo Letto
    Commented 18/07/2018 às 23:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .