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

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 >
  <div >Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div >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 >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 >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 >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 >Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div >Child 7  text here 
  </div>
</div>

CodePudding user response：

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

CodePudding user response：

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 >
  <div >Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div >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 >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 >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 >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 >Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div >Child 7  text here 
  </div>
</div>

CodePudding user response：

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 >
  <div >Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
  </div>
  <div >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 >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 >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 >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 >Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
  </div>
  <div >Child 7  text here 
  </div>
</div>