0

I have a container with id parentContainer and a bunch of divs (with width 44%, height depends on the div) inside this container, all with the class childDiv. I want to display them sort of like this:

grid

This is a two column gallery, and I could achieve this by creating two separate divs for the columns, and then putting the divs in there. However, I don't really want to do this, is there another way?

I'm trying to do this without the extra column divs, here is the CSS for the parent container:

#parentContainer {
    width: 70vw;
    height: 50vh;
    border: 1px solid black;
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    padding: 50px;
    display: block;
    overflow-y: auto;
}

.childDiv {
    float: left;
    border: 1px solid black;
    width: 44%;
    margin: 1%;
}
<div id='parentContainer'>
  <div class="childDiv" style="height: 200px;"></div>
  <div class="childDiv" style="height: 160px;"></div>
  <div class="childDiv" style="height: 200px;"></div>
  <div class="childDiv" style="height: 200px;"></div>
</div>
Tyrcnex
  • 196
  • 12
  • What order do you want the columns to go in? Right now it looks like your demo shows a backward "C" shape... I'm guessing that's not desired? Most people want columns or rows. The current duplicate target points to a question about how to do it via rows, but if you want to know how to do it via columns, the question might need to be reopened or marked as a duplicate of a different canonical. – TylerH Jan 25 '23 at 15:15
  • @TylerH I want to do it via rows, sorry for not labelling the diagram. But anyways, I've solved with problem using Masonry.js. – Tyrcnex Jan 26 '23 at 08:32

0 Answers0