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

Please include the code you have tried and explain more what your HTML structure is. — A Haworth, Sep 17 '22 at 05:37

score 1 · Answer 1 · 2022-09-17T05:57:37.190

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;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Himani Dadem · Answer 2 · 2022-09-17T06:53:05.350

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;
    }
}

<!doctype html>
<html>

<head>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!--Masonry Layout cdn-->
  <script defer src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
    integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"
    async></script>
</head>

<body>

  <section >
    <div class="container">     
      <div class="row g-3" data-masonry='{"percentPosition": true }'>
        <div class="col-lg-4 col-md-6 col-12 ">
            <img class="image" id="image1" src="https://i.ibb.co/YNvbbMC/0V5A0971.jpg">
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <img class="image" id="image2" src="https://i.ibb.co/YpZ3NBH/0V5A0975.jpg">
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <img class="image" id="image3" src="https://i.ibb.co/pxVtdR9/0V5A0980.jpg">
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <img class="image" id="image4" src="https://i.ibb.co/CWTXksK/0V5A2619.jpg" >
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <img class="image" id="image5" src="https://i.ibb.co/LJdmcdc/0V5A2620.jpg">
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <img class="image" id="image6" src="https://i.ibb.co/XxMVkDX/0V5A2621.jpg">
        </div>       
      </div>
    </div>
  </section>
  
</body>
</html>

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.

@MeghnaBhuptani It would work without Bootstrap too. It's just that bootstrap has the responsive behavior inbuilt into it. So I used it for simplicity — Himani Dadem, Sep 17 '22 at 08:16
Yes, but they only require HTML & CSS. If they want than they add Boostrap tag in question. — , Sep 17 '22 at 08:31

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

2 Answers2