CSS dynamic columns inside single container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

CSS dynamic columns inside single container

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.flexbox {<!-- ww w  .  java2  s . com-->
   display: flex;
   flex-flow: column wrap;
   align-content: flex-start;
   height: 100vh;
}
.rekt {
   width: 422px;
   background-color: beige;
   /* height: 100%; */
   padding: 15px;
   padding-bottom: 5px;
   /* margin-bottom: 10px; */
   border: 1px solid black;
}
.row {
   background-color: lightgreen;
   color: royalblue;
   width: 97.5%;
   border: 1px solid black;
   padding: 5px;
   margin-bottom: 10px;
}
span {
   font-weight: bold;
   margin-bottom: 5px;
   display: inline-block;
}
body {
   margin: 0;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="flexbox"> 
   <div class="rekt"> 
    <span>Cluster1</span> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
   </div> 
   <div class="rekt"> 
    <span>Cluster2</span> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
   </div> 
   <div class="rekt"> 
    <span>Cluster3</span> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
   </div> 
   <div class="rekt"> 
    <span>Cluster4</span> 
    <div class="row">
      Cassandra 
    </div> 
    <div class="row">
      Mongo 
    </div> 
   </div> 
   <div class="rekt"> 
    <span>Cluster5</span> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
   </div> 
   <div class="rekt"> 
    <span>Cluster6</span> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      foo 
    </div> 
    <div class="row">
      bar 
    </div> 
    <div class="row">
      bar 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials