Create layout HTML with different div with different height - html

Question

I would like to create a layout with divs with different height.
Example image:
I would like even that div can change the height based on the content.
In my code, I put a fixed height for the div so I want to modify it but I don't know how.
This is my code:
HTML
<div>
<div class="g-block-1">
<div class="block1"></div> <div class="block2"></div>
</div>
<div class="g-block-2">
<div class="block3"></div>
<div class="block4"></div>
<div class="block5"></div>
</div>
</div>
CSS
.block1 {
width: 100%;
height: 500px;
background-color: red;
}
.block2 {
width: 100%;
height: 350px;
background-color: yellow;
}
.block3 {
width: 100%;
height: 100px;
background-color: blue;
}
.block4{
width: 100%;
height: 350px;
color: black;
}
.block5 {
width: 100%;
height: 400px;
color: pink;
}
.g-block-1 {
width: 50%;
float: left;
}
.g-block-2 {
width: 50%;
float: right;
}

Answer 1

Something like this?
https://jsfiddle.net/scorpio777/wwwLmvfu/
<style>
pre {margin:0 padding:0;}
.block1 {
width: 100%;
height: 100%;
border:1px solid;
border-color:red;
margin:0;
padding:0;
}
.block2 {
width: 100%;
height: 100%;
border:1px solid;
border-color:orange;
margin:0;
padding:0;
}
.block3 {
width: 100%;
height: 100%;
border:1px solid;
border-color:blue;
margin:0;
padding:0;
}
.block4{
width: 100%;
height: 100%;
border:1px solid;
border-color:green;
margin:0;
padding:0;
}
.block5 {
width: 100%;
height: 100%;
border:1px solid;
border-color:pink;
margin:0;
padding:0;
}
.g-block-1 {
width: 50%;
height:100%;
float: left;
display:inline-block;
margin:0;
padding:0;
}
.g-block-2 {
width: 50%;
float: right;
height:100%;
display:inline-block;
margin:0;
padding:0;
}
}
</style>
<div>
<div class="g-block-1">
<div class="block1">
<pre>
some content
some content
some content
some content
some content
some content
some content
some content
</pre>
</div>
<div class="block2">
<pre>
some content
some content
some content
some content
some content
some content
some content
some content
some content
some content
</pre>
</div>
</div>
<div class="g-block-2">
<div class="block3">
<pre>
some content
some content
some content
some content
some content
</pre>
</div>
<div class="block4">
<pre>
some content
some content
some content
some content
some content
</pre>
</div>
<div class="block5">
<pre>
some content
some content
some content
some content
some content
</pre>
</div>
</div>
</div>

Answer 2

You can try this responsive solution:
* {box-sizing: border-box}
body {margin: 0}
#container {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.items {
column-count: 3;
column-gap: 10px;
}
.item {
margin-bottom: 10px;
page-break-inside: avoid;
break-inside: avoid-column;
}
img {
display: block;
max-width: 100%;
}
#media (max-width: 1220px) {
.items {padding: 0 10px}
}
#media (max-width: 990px) {
.items {column-count: 2}
}
#media (max-width: 500px) {
.items {column-count: 1}
}
<div id="container">
<section class="items">
<div class="item">
<img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="">
</div>
<div class="item">
<img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="">
</div>
<div class="item">
<img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="">
</div>
<div class="item">
<img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="">
</div>
<div class="item">
<img src="http://webbox.imgix.net/images/aisrvqxbdirtzdby/c141a47e-bdd2-4687-a795-61141548c195.jpg?auto=enhance,compress&fit=crop&w=750&h=600" alt="">
</div>
<div class="item">
<img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="">
</div>
<div class="item">
<img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="">
</div>
<div class="item">
<img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="">
</div>
<div class="item">
<img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="">
</div>
<div class="item">
<img src="http://webbox.imgix.net/images/aisrvqxbdirtzdby/c141a47e-bdd2-4687-a795-61141548c195.jpg?auto=enhance,compress&fit=crop&w=750&h=600" alt="">
</div>
<div class="item">
<img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="">
</div>
<div class="item">
<img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="">
</div>
<div class="item">
<img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="">
</div>
<div class="item">
<img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="">
</div>
<div class="item">
<img src="https://www.fredericanaturereserve.com/wp-content/uploads/2016/08/500x350-px-F1-10.jpg" alt="">
</div>
<div class="item">
<img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="">
</div>
<div class="item">
<img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="">
</div>
<div class="item">
<img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="">
</div>
<div class="item">
<img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="">
</div>
</section>
</div>