Organize objects of varying heights in a grid formation

Question

Organize objects of varying heights in a grid formation

Looking for a solution to arrange UI components of varying dimensions in a grid layout? The challenge is to have each row be equal to the height of the tallest component in that row, with no fixed number of columns. Components should maintain their original dimensions and automatically wrap to the next row when needed.

Bootstrap requires specifying column widths like col-xs-number, but it's not feasible when the number of items per row is dynamic.

Note: The application uses bootstrap version 3 and cannot upgrade to V4.

Wondering if there's a way to achieve this design?

css twitter-bootstrap-3

Answer 1

Answer №1

You don't need to rely on Bootstrap for this, simply utilize display: inline-block for the elements.

Here is a demonstration where I have included 12 elements with different heights in a container div. The width of the container div changes randomly each time the demo runs to showcase how the elements wrap differently each time.

var heights = [100, 20, 80, 140, 65, 90, 30, 70, 130, 55, 75, 100];
for (var i = 0; i < heights.length; i++) {
  $('#x').append($('<div style="height:' + heights[i] + 'px"></div>'))
}
var w = Math.floor((Math.random() * 400) + 100);
$('#x').css("width", w + "px");

#x div {
  display: inline-block;
  vertical-align: text-top;
  width: 50px;
  background: green;
  margin: 10px;
}

#x {
  border: solid 1px #888
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<div id="x"></div>
<hr>

Answer 2

You don't need to rely on Bootstrap for this, simply utilize display: inline-block for the elements.

Here is a demonstration where I have included 12 elements with different heights in a container div. The width of the container div changes randomly each time the demo runs to showcase how the elements wrap differently each time.

var heights = [100, 20, 80, 140, 65, 90, 30, 70, 130, 55, 75, 100];
for (var i = 0; i < heights.length; i++) {
  $('#x').append($('<div style="height:' + heights[i] + 'px"></div>'))
}
var w = Math.floor((Math.random() * 400) + 100);
$('#x').css("width", w + "px");

#x div {
  display: inline-block;
  vertical-align: text-top;
  width: 50px;
  background: green;
  margin: 10px;
}

#x {
  border: solid 1px #888
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<div id="x"></div>
<hr>

Answer 3

Answer №2

Try using flexbox for creating columns in Bootstrap 4 without specifying numbers.

For example, you can achieve this with the following CSS:

.container{
  border:1px solid black;
}

.col:first-of-type{
  background:white;
}

.col:nth-of-type(2){
  background:green;
}

.col:last-of-type{
  background:red;
}

And here is how you would structure your HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
  <div class="row">
    <div class="col">First</div>
    <div class="col">Second</div>
    <div class="col">Third</div>
  </div>
</div>

Answer 4

Try using flexbox for creating columns in Bootstrap 4 without specifying numbers.

For example, you can achieve this with the following CSS:

.container{
  border:1px solid black;
}

.col:first-of-type{
  background:white;
}

.col:nth-of-type(2){
  background:green;
}

.col:last-of-type{
  background:red;
}

And here is how you would structure your HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
  <div class="row">
    <div class="col">First</div>
    <div class="col">Second</div>
    <div class="col">Third</div>
  </div>
</div>

Organize objects of varying heights in a grid formation

Answer №1

Answer №2

Similar questions

How can I implement a thumbnail editing feature similar to Facebook's display image uploader in an Asp.net application using c#?

arranging elements within a container

Is there a way to switch the classList between various buttons using a single JavaScript function?

The 'float' property in HTML and CSS

Using an SVG filter to create a solid blue color overlay on an image

Codepen fails to function properly after being uploaded to a server

What is the best way to ensure that text and SVG elements are properly aligned?

Using Sass to Loop through Specific Items

The navbar slide toggle is supposed to slide behind the navbar, but instead it slides in front of

The dropdown div does not activate when the image is clicked

Challenges that arise from IE6 css issues

When the hover effect is triggered, the background animation smoothly resets back to its initial position once the

Issues with implementing CSS Icon Generated Content on a live Azure Web Role

Styling WordPress Ninja Tables with CSS

Firefox: log shows no CSS errors or warnings

Organize and eliminate items within a vessel

Eliminate any undefined data in the popup map of Javascript

What is causing Mag Pagination and Mag Sort to malfunction?

Unable to click on links due to issues with the CSS and HTML

The position of the <input> element shifts once the user provides input