Ways to showcase a collection of divs in a dual-column layout while minimizing any unnecessary vertical spacing

Question

Ways to showcase a collection of divs in a dual-column layout while minimizing any unnecessary vertical spacing

Is there a way to create two columns without changing the HTML structure? The content within each child element is dynamic, so there needs to be dynamic vertical spacing as well. I'm experimenting with different CSS properties for both the parent and child elements to achieve this.

.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...
  </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

Answer 1

Answer №1

Another alternative approach could involve utilizing the display: inline-block; property.

.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 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>

Answer 2

Another alternative approach could involve utilizing the display: inline-block; property.

.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 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>

Answer 3

Answer №2

To achieve a responsive layout, utilize flex-direction: row along with flex-wrap: wrap while eliminating the float: left

This will allow the content to span the entire width of the page until reaching capacity, at which point it will shift to a new line

Given your specified 48% width, this configuration will result in two columns with 4% remaining space

Answer 4

To achieve a responsive layout, utilize flex-direction: row along with flex-wrap: wrap while eliminating the float: left

This will allow the content to span the entire width of the page until reaching capacity, at which point it will shift to a new line

Given your specified 48% width, this configuration will result in two columns with 4% remaining space

Answer 5

Answer №3

This is the rewritten version.

Answer 6

This is the rewritten version.

Ways to showcase a collection of divs in a dual-column layout while minimizing any unnecessary vertical spacing

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way for me to merge the specifications of two itemscopes in order to depict a

The issue of the keyboard disappearing on Chrome for Android while switching between different input

Exploring Angular's Animation Feature for HTML Element Movement

Styling a webpage with a two-row layout using just CSS

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

unwelcome tab spacing in CSS

Is there a method to prompt the browser to retain form data when using the back button?

Are you looking for methods to alter the elements of a webpage prior to viewing it?

What is the best way to continuously add items to a div until their heights are equal?

When implementing CSS object-fit: contain on an image, it may result in empty spaces surrounding the image

Enhance your bootstrap accordion by incorporating stylish up and down arrows using the <accordion> element

At what point does a box create an inline formatting context?

What is the method for creating a hovering triangle on a particular element?

Connect to a point on the leaflet map using an external <a> tag reference

Exploring the utility of the load_file function in the simple HTML DOM method

Using JQuery Mobile to Incorporate Links into List Elements

Creating dynamic links between two cells of two HTML tables within an HTML email using JavaScript

Is there a way to incorporate an 'ended' feature into the .animate() function?

What is the best way to incorporate an input bar in a Bootstrap panel header?

One-Time Age Verification Popup Requirement