How do I vertically align a div at a specific spot with other elements having different heights? html/css

Question

I'm having trouble for a while trying to align elements starting at a specific moment going downward, and being responsive to different element height.

I want it to use display flex. It needs to adjust/decrease columns as a window resizes. thanks a ton

example image

Meghna Bhuptani · Answer

Try this code:

.container {
  background-color: #F9F9F9;
  padding: 10px;
  border: 2px solid #DDDDDD;
  max-width: 700px;
  margin: 0 auto;
  height: 550px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  border: 2px solid #000000;
  height: 200px;
  width: 26%;
  margin: 10px;
  padding: 10px;
}
.item:nth-child(1) {
  height: 150px;
}

.item:nth-child(2) {
  height: 200px;
}

.item:nth-child(3), .item:nth-child(5) {
  height: 300px;
}

.item:nth-child(4), .item:nth-child(6) {
  height: 160px;
}

Himani Dadem · Answer

The grid style you need is called 'Masonry Layout'. You will get many ready to use cdn on the web. Just embed a cdn in the script tag inside the head tag. And it would do the magic. I am providing a sample code for you down here.

  .image {
    width: 100%;
    object-fit: cover;
     }
  #image1{
    height: 550px;
  }
  #image2{
    height: 350px;
  }
  #image3{
    height: 450px;
  }
  #image4{
    height: 550px;
  }
  #image5{
    height: 250px;
  }
  #image6{
    height: 450px;
  }
  #image7{
    height: 450px;
  }
  #image8{
    height: 450px;
  }
  #image9{
    height: 550px;
  }
  #image10{
    height: 250px;
  }
  #image11{
    height: 250px;
  }
  #image12{
    height: 250px;
  }

@media only screen and (max-width:992px) {
    .image{
        height:400px;
    }
    
}
@media only screen and (max-width:768px) {
    .image{
        height:300px;
    }
}
@media only screen and (max-width:576px) {
    #image1{
        height:250px;
    }
    #image2{
        height:250px;
    }
    #image3{
        height:250px;
    }
    #image4{
        height:250px;
    }
    #image5{
        height:250px;
    }
    #image6{
        height:250px;
    }
}

Click on 'Full page' and adjust the window to see it's responsive behaviour.

Let me explain the code.

HTML snippet

Masonry cdn is embedded inside the head. I have used Bootstrap here. It would work even with regular CSS. But Bootstrap makes life easy. Class 'image' is common to all the images and each one is having its own id.

CSS snippet

Applying width 100% and object-fit=cover to all the images so that they don't overflow. Next, I have mentioned the default heights of images followed by how much should their height be as the window width changes.

How do I vertically align a div at a specific spot with other elements having different heights? html/css

2 Answers