0

I'm trying to make a grid system like pinterest with the property display:inline-block.

However I don't understand the position of "colonne 4", Is there a easy way to make her be just after column 1 ?

the column 4 still aligns its top on the largest size on row 1...

.test {
 color: red;
}

.container>* {
 width: 32%;
}

.colonne {
 border: 1px green solid;
 display: inline-block;
 vertical-align: top;
}

[class^="categorie"]{
border:1px black solid;
}
.categorie_1 {
 height: 30px;
}

.categorie_2 {
 height: 20px;
}

.categorie_3 {
 height: 100px;
}

.container {
 border: 1px red solid;
}

.box2 {
 display: inline-block;
 width: 200px;
 height: 100%;
 margin: 1em;
}
 <div class="container">
  <!--      colonne vertical 1 -->
  <div class="colonne">
   <h1>colonne 1</h1>
   <div>
    <div class="categorie_1">categorie 1</div>
    <div class="categorie_2">categorie 2</div>
   </div>
  </div>
  <!--      colonne vertical 2 -->
  <div class="colonne">
   <h1>colonne 2</h1>
   <div>
    <div class="categorie_3">categorie 3</div>
    <div class="categorie_2">categorie 2</div>
   </div>
  </div>
    <!--      colonne vertical 3 -->
  <div class="colonne">
   <h1>colonne 3</h1>
   <div>
    <div class="categorie_3">categorie 3</div>
    <div class="categorie_2">categorie 2</div>
   </div>
  </div>
    <div class="colonne">
   <h1>colonne 4</h1>
   <div>
    <div class="categorie_3">categorie 3</div>
    <div class="categorie_2">categorie 2</div>
   </div>
  </div>
 </div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
loxos
  • 3
  • 3
  • Basically, no, there is no easy way. There are some JS libraries which automatize it, though. – Oriol Nov 26 '15 at 17:00
  • In pinterest the arrangement is column wise not the default row wise. Try to think and arrange them in columns of containers. – Abel D Nov 26 '15 at 17:06

0 Answers0