Skip to main content

RESOLVIDO !
De acordo com o comentário do devgaspa.
Achei mais simples e como resolveu, nem testei outros métodos.
OBRIGADO

Usando a propriedade flex-box do css3 consegui fazer oque você precisa, porem o width da div pai não acompanha os filhos, é fixo, talvez de para arrumar isto. JSFiddle: jsfiddle.net/devgaspa/zgveahjp/2 Referência: desenvolvimentoparaweb.com/css/flexbox Can i use?: caniuse.com/#feat=flexbox – devgaspa

.pai {
    background: orange;
    
    display: flex;
    
    flex-direction: column;
    flex-wrap: wrap;
    
    height: 500px;
    width: 0px;
}

.filhos {
    border: 1px solid lightgray;
    box-sizing: border-box;
   height: 100px;
    width: 100px;
}
<div class="pai">     
    <div class="filhos">0</div>
    <div class="filhos">1</div>
    <div class="filhos">2</div>
    <div class="filhos">3</div>
    <div class="filhos">4</div>
    <div class="filhos">5</div>
    <div class="filhos">6</div>
    <div class="filhos">7</div>
    <div class="filhos">8</div>
    <div class="filhos">9</div>
    <div class="filhos">10</div>
</div>

RESOLVIDO !
De acordo com o comentário do devgaspa.
Achei mais simples e como resolveu, nem testei outros métodos.
OBRIGADO

Usando a propriedade flex-box do css3 consegui fazer oque você precisa, porem o width da div pai não acompanha os filhos, é fixo, talvez de para arrumar isto. JSFiddle: jsfiddle.net/devgaspa/zgveahjp/2 Referência: desenvolvimentoparaweb.com/css/flexbox Can i use?: caniuse.com/#feat=flexbox – devgaspa

RESOLVIDO !
De acordo com o comentário do devgaspa.
Achei mais simples e como resolveu, nem testei outros métodos.
OBRIGADO

Usando a propriedade flex-box do css3 consegui fazer oque você precisa, porem o width da div pai não acompanha os filhos, é fixo, talvez de para arrumar isto. JSFiddle: jsfiddle.net/devgaspa/zgveahjp/2 Referência: desenvolvimentoparaweb.com/css/flexbox Can i use?: caniuse.com/#feat=flexbox – devgaspa

.pai {
    background: orange;
    
    display: flex;
    
    flex-direction: column;
    flex-wrap: wrap;
    
    height: 500px;
    width: 0px;
}

.filhos {
    border: 1px solid lightgray;
    box-sizing: border-box;
   height: 100px;
    width: 100px;
}
<div class="pai">     
    <div class="filhos">0</div>
    <div class="filhos">1</div>
    <div class="filhos">2</div>
    <div class="filhos">3</div>
    <div class="filhos">4</div>
    <div class="filhos">5</div>
    <div class="filhos">6</div>
    <div class="filhos">7</div>
    <div class="filhos">8</div>
    <div class="filhos">9</div>
    <div class="filhos">10</div>
</div>

Fonte Link
Pedro Augusto
  • 2,4mil
  • 2
  • 21
  • 40

RESOLVIDO !
De acordo com o comentário do devgaspa.
Achei mais simples e como resolveu, nem testei outros métodos.
OBRIGADO

Usando a propriedade flex-box do css3 consegui fazer oque você precisa, porem o width da div pai não acompanha os filhos, é fixo, talvez de para arrumar isto. JSFiddle: jsfiddle.net/devgaspa/zgveahjp/2 Referência: desenvolvimentoparaweb.com/css/flexbox Can i use?: caniuse.com/#feat=flexbox – devgaspa