Good evening guys, I'm trying to do a basic layout similar to the Windows 8/10 home screen, and in a container I'd like to align vertical items of 80x80, and if according to Height by perhaps some items will not fit in this first column to be started in the second column, and so on as in the image.
Sorry if I could not express it well, thank you.
In my view the best syntax option is using flexbox
display:flex Adding to parent flex-direction:column To grow in column format with flex-wrap:wrap; When you are finished with the column space of a column, you must create a new align-content:flex-start aligning everything left to right with
.pai{
height:400px;
width:800px;
border:1px solid black;
display:flex;
flex-direction:column;
flex-wrap:wrap;
align-content: flex-start;
}
.pai .filha{
height:100px;
width:100px;
border: 1px solid red;
}
.filha.pequeno{
height:100px;
}
.filha.medio{
height:150px;
}<div class="pai">
<div class="filha pequeno"></div>
<div class="filha medio"></div>
<div class="filha pequeno"></div>
<div class="filha medio"></div>
<div class="filha pequeno"></div>
<div class="filha pequeno"></div>
<div class="filha pequeno"></div>
<div class="filha medio"></div>
<div class="filha pequeno"></div>
<div class="filha medio"></div>
</div> You can do with float , but I prefer this if you have
other questions have the documentation at link
You can use Flexbox for this, I think the main problem is the compatibility with the older browsers, because these functions will work only in IE11 +
References:
Here's an example.
.flex{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#c1{height: 40px; border: 1px solid green;}
#c2{height: 80px; border: 1px solid green;}
#c3{height: 120px; border: 1px solid green;}
#c4{height: 120px; border: 1px solid green;}
.inner{width:36px; height:36px; background: blue;margin: 2px;color: white; font-weight: 700; text-align: center;}Div Container Padrão 1
<div id="c1" class="flex">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
Div Container Padrão 2
<div id="c2" class="flex">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
Div Container Padrão 3
<div id="c3" class="flex">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
Div Container Padrão 4
<div id="c4" class="flex">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
</div>