CSS Layout How to - Create flow down layout from top with column

Question

We would like to know how to create flow down layout from top with column.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {<!--from  w w  w  . j av  a2 s .  co  m-->
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 30px;
  column-width: 30%;
}

.box {
  margin-bottom: 6%;
}

.box.one {
  height: 200px;
  background-color: #d77575;
}

.box.two {
  height: 300px;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: 400px;
}

.box.four {
  background-color: #3daee3;
  height: 500px;
}

.box.five {
  background-color: #bb8ed8;
  height: 600px;
}

.box.six {
  background-color: #baafb1;
  height: 200px;
}
</style>
</head>
<body>
  <div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
  </div>
</body>
</html>

The code above is rendered as follows: