[Solved] How to create this layout using CSS

by


You can use CSS3 multi-column layouts. The content is distributed inside columns like a newspaper. Browsers distribute content so that all columns are same(ish) height. However note that (i) the content displays from top to bottom, left to right (ii) the browser support is limited at the moment.

$("#button1").on("click", function() {
  $("#container > div").height(function() {
    return Math.floor(Math.random() * 300);
  });
});
#container {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
#container > div {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  min-height: 100px;
  border-bottom: 1em solid white;
  background-color: powderblue;
}
#button1 {
  position: absolute;
  left: 0;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<input id="button1" type="button" value="Randomize box sizes">

Regarding screen sizes: you can use CSS media queries to control the number of columns. For example you could choose to show 4 columns on 1000px+, 3 columns on 800px+ and two columns on smaller screens.

1

solved How to create this layout using CSS