I'm looking to create a visually appealing grid of images that flow well together.
Check out my image grid here:
The issue I'm facing is that not all the images have the same height. Specifically, I want the 4th image (gray) to be displayed below the first image (green) without using 3 columns. Any suggestions on how I can achieve this?
.img1 {
width: 300px;
height: 200px;
float: left;
background: green;
}
.img2 {
width: 300px;
height: 400px;
float: left;
background: blue;
}
.img3 {
width: 300px;
height: 300px;
float: left;
background: yellow;
}
.img4 {
width: 300px;
height: 400px;
float: left;
background: gray;
}