What is the best way to align a series of divs vertically within columns?

Question

What is the best way to align a series of divs vertically within columns?

Struggling to find the right words to ask this question has made it difficult for me to locate relevant search results. However, I believe a picture is worth a thousand words so...https://i.stack.imgur.com/LfPMO.png

I am looking to create multiple columns of divs with varying heights that adjust their vertical alignment based on the div above them within the same column, rather than in relation to neighboring divs.

Edit:

In addition, I need the number of columns to automatically adapt based on screen size. This means there could be anywhere from one to four columns at any given time, while maintaining the same total number of divs.

javascript jquery html css

Answer 1

Answer №1

Expanding on the statement made by Sterling Archer, it is recommended to style all of them

float:left;

to ensure they are evenly spaced apart from one another. A percentage value can be used to determine their width

width:33%;

If you require an illustration, I am more than willing to provide one, although there are numerous examples available for reference.

Answer 2

Expanding on the statement made by Sterling Archer, it is recommended to style all of them

float:left;

to ensure they are evenly spaced apart from one another. A percentage value can be used to determine their width

width:33%;

If you require an illustration, I am more than willing to provide one, although there are numerous examples available for reference.

Answer 3

Answer №2

To implement a flexible layout, you can utilize the flex property with the width set to approximately 30%:

.board {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: space-between;
}

.col {
 width: 30%;
 margin: 0 auto;
}

.cell  {
  height: 50px;
  width: 100%;
  background-color: black;
  margin-bottom: 10px;
}

<div class="board">
  <div class="col">
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 120px"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Answer 4

To implement a flexible layout, you can utilize the flex property with the width set to approximately 30%:

.board {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: space-between;
}

.col {
 width: 30%;
 margin: 0 auto;
}

.cell  {
  height: 50px;
  width: 100%;
  background-color: black;
  margin-bottom: 10px;
}

<div class="board">
  <div class="col">
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 120px"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Answer 5

Answer №3

Incorporating an external library like Bootstrap can provide you with the capability to implement a responsive grid system that adjusts based on the screen resolution. This means that in higher resolutions, you can display more columns, while in lower resolutions, you can reduce the number of columns.

Answer 6

Incorporating an external library like Bootstrap can provide you with the capability to implement a responsive grid system that adjusts based on the screen resolution. This means that in higher resolutions, you can display more columns, while in lower resolutions, you can reduce the number of columns.

Answer 7

Answer №4

If you're looking for a quick solution, consider using masonry js. Check out this sample of masonry in action on LiveOnFiddle

$( function() {

    $('#container').masonry({
        itemSelector: '.item',
    
    });

});

#container {
  border:1px dotted black;
    padding: .3em;
}

.item {
    width: 60px;
    height: 60px;
 
    margin: 5px;
    background: red;
     
}

.item.w2 {
    width: 130px;
      background: blue; 
}

.item.h2 {
    height: 130px;  background:green;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div id="container">
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

Answer 8

If you're looking for a quick solution, consider using masonry js. Check out this sample of masonry in action on LiveOnFiddle

$( function() {

    $('#container').masonry({
        itemSelector: '.item',
    
    });

});

#container {
  border:1px dotted black;
    padding: .3em;
}

.item {
    width: 60px;
    height: 60px;
 
    margin: 5px;
    background: red;
     
}

.item.w2 {
    width: 130px;
      background: blue; 
}

.item.h2 {
    height: 130px;  background:green;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div id="container">
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

Answer 9

Answer №5

The design style displayed here is commonly referred to as Masonary. To create this unique layout, I incorporated a JQuery plugin that can be found at the following link:

Answer 10

The design style displayed here is commonly referred to as Masonary. To create this unique layout, I incorporated a JQuery plugin that can be found at the following link:

Answer 11

Answer №6

I have provided a flex solution. You can view the implementation on this fiddle link. Additionally, I have included the corresponding HTML and CSS code below for your reference. Feel free to let me know if this meets your requirements!

.column-wrapper {
  display: flex;
  flex-direction: row;
}
.column-1, .column-2, .column-3 {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
} 
.box {
  background-color: red;
  height: auto;
  min-height: 100px;
  margin: 10px;
  width: 100%;
}
.box p {
  font-size: 40px;
}

<div class="column-wrapper">
  <div class="column-1">
    <div class="box">
      <p>hello and good luck!</p>
    </div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 12

I have provided a flex solution. You can view the implementation on this fiddle link. Additionally, I have included the corresponding HTML and CSS code below for your reference. Feel free to let me know if this meets your requirements!

.column-wrapper {
  display: flex;
  flex-direction: row;
}
.column-1, .column-2, .column-3 {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
} 
.box {
  background-color: red;
  height: auto;
  min-height: 100px;
  margin: 10px;
  width: 100%;
}
.box p {
  font-size: 40px;
}

<div class="column-wrapper">
  <div class="column-1">
    <div class="box">
      <p>hello and good luck!</p>
    </div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

What is the best way to align a series of divs vertically within columns?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Tips for aligning all positioned elements in a div

Issue with Vue.js 2: Image tag disappears following re-render when fetching data from the server

When I expand the accordion next to it, the accordion disappears, and it also vanishes when I close that accordion

Fetching content and an image simultaneously via AJAX

Sending multiple checkbox values using Jquery Ajax to a PHP script

Getting a Node Express 404 error while attempting to display an image that was uploaded using multer

Is there a way to manipulate the appearance of a scroller using JavaScript?

Regenerate main JavaScript files in Gulp whenever partials are edited

What is the process of transferring an object to a different scope by utilizing checkboxes and Ajax?

Is there a way to extract all the data values starting with "data-" from the selected input fields in HTML5 and compile them into an object?

There seems to be a disconnect between the CSS and HTML files

What is the best way to activate a function after all the AJAX calls within a function have finished executing?

Tips for ensuring a custom menu closes when clicking outside of it instead of on the menu itself

The functionality to disable the ES lint max length rule is malfunctioning

"Triggering a JavaScript event when pasting text on

Show a message notifying the user of an incorrect password input

Image not located: 404 error in JavaScript

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding

Utilizing Objects as Properties in Phaser.Scene in Phaser 3

ngx-bootstrap encountered an issue: TypeError - _co.openModal is unavailable as a function