How do I vertically align a div at a specific spot with other elements having different heights? htm-CodePudding

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

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

<body>

  <section >
    <div >     
      <div  data-masonry='{"percentPosition": true }'>
        <div >
            <img  id="image1" src="https://i.ibb.co/YNvbbMC/0V5A0971.jpg">
        </div>
        <div >
            <img  id="image2" src="https://i.ibb.co/YpZ3NBH/0V5A0975.jpg">
        </div>
        <div >
            <img  id="image3" src="https://i.ibb.co/pxVtdR9/0V5A0980.jpg">
        </div>
        <div >
            <img  id="image4" src="https://i.ibb.co/CWTXksK/0V5A2619.jpg" >
        </div>
        <div >
            <img  id="image5" src="https://i.ibb.co/LJdmcdc/0V5A2620.jpg">
        </div>
        <div >
            <img  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.