'How to display a list of divs in two columns without extra vertical space

With below snippet, there appears extra spaces on left side between divs. Is it possible to create two columns without altering the HTML schema? Each child can have dynamic content hence dynamic vertical space.I am trying to fiddle with different CSS combinations for parent and child.

.parent{

}

.child{
  display:flex;
  float:left;
  width: 48%;
  padding: 3px;
  border: 1px solid red;
  background-color: gray;
}


/** Ignore below */
.child1{
  background-color: green;
}
.child2{
  background-color: blue;
}
.child3{
  background-color: darkblue;
}
.child4{
  background-color: lightgreen;
}
.child5{
  background-color: yellow;
}
.child6{
  background-color: #989898;
}
.child7{
  background-color: #545454;
}

<div class="parent">
  <div class="child child1">Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div class="child child2">Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here 
  </div>
  <div class="child child3">Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here 
  </div>
  <div class="child child4">Child 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text here 
  </div>
  <div class="child child5">Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here 
  </div>
  <div class="child child6">Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div class="child child7">Child 7  text here 
  </div>
</div>

html css flexbox

Solution 1:^[1]

Use flex-direction: row and flex-wrap: wrap and remove float: left

it will take the full width of the page until there is no more space and it will wrap to a new line

in your case since you have a width of 48% it will make 2 columns with 4% left

Solution 2:^[2]

You can't have a full-on 'masonry' sort of layout with pure CSS as yet, but you can get two columns where the spare space - if any - will be only at the end.

Remove flex and width settings and use columns property.

.parent{
  columns: 2;
}

.child{
  padding: 3px;
  border: 1px solid red;
  background-color: gray;
}


/** Ignore below */
.child1{
  background-color: green;
}
.child2{
  background-color: blue;
}
.child3{
  background-color: darkblue;
}
.child4{
  background-color: lightgreen;
}
.child5{
  background-color: yellow;
}
.child6{
  background-color: #989898;
}
.child7{
  background-color: #545454;
}

<div class="parent">
  <div class="child child1">Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div class="child child2">Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here 
  </div>
  <div class="child child3">Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here 
  </div>
  <div class="child child4">Child 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text here 
  </div>
  <div class="child child5">Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here 
  </div>
  <div class="child child6">Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div class="child child7">Child 7  text here 
  </div>
</div>

Solution 3:^[3]

One more possible way would be to use display: inline-block;.

.parent {
  background-color: #aaa;
  margin: 0 auto;
  height: 100%;
  width: 500px;
  column-count: 2;
  gap: 10px;
  padding: 5px;
}

.child {  
  padding:10px;
  background-color: white;
  border: 1px solid black;
  width: 100%;  
  display: inline-block;
  box-sizing: border-box;
  margin-bottom: 5px;
}

child1{
  background-color: green;
}
.child2{
  background-color: blue;
}
.child3{
  background-color: darkblue;
}
.child4{
  background-color: lightgreen;
}
.child5{
  background-color: yellow;
}
.child6{
  background-color: #989898;
}
.child7{
  background-color: #545454;
}

<div class="parent">
  <div class="child child1">Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div class="child child2">Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here 
  </div>
  <div class="child child3">Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here 
  </div>
  <div class="child child4">Child 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text here 
  </div>
  <div class="child child5">Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here 
  </div>
  <div class="child child6">Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div class="child child7">Child 7  text here 
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lk77
Solution 2	A Haworth
Solution 3	Maik Lowrey

'How to display a list of divs in two columns without extra vertical space

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]