Quantity of items aligned vertically according to height of div

Asked

Viewed 145 times

1

Good evening guys, I’m trying to make a basic layout similar to Windows 8/10 home screen, and in a container I would like to align vertical 80x80 items, and if according to the Height by chance some items do not fit in this first column be started in the second column, and so successively as in the image.

Modelo

Sorry if I couldn’t express it well, thank you.

html css css3

  • Hope would be in the flexbox, but vertical is somewhat inconsistent.

2 answers

2


In my view the best syntax option is using flexbox

  • display:flex Adding to the father
  • flex-direction:column To grow in column format with
  • flex-wrap:wrap; When the column space of a column is finished, you must create a new
  • align-content:flex-startaligning 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 one, if you have other doubts have the documentation in this link

1

You can use Flexbox for this, I think the main problem is compatibility with older browsers, because these functions will only work on IE11+

References:

Source and other example

Flex Wrap

Flex Direction

Follow 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>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.