Positioning issue when display items like gallery items

Question

I have some data(boxes) that should display like gallery items (like in any shoping site), the issue is height of each box is not same because of its content and each row has 4 items(boxes), let say if one of the box from first has height 300px and all others has height 250px then next item in next start from end of max height in first row, i did not want it like this, i did not want these empty spaces, every box in next row should display under box from first row

here is my code

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
  width: 400px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin: 0 10px 10px 0;
  float: left;
  padding: 15px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

You are trying to achieve an effect I know as masonry. It's pretty complex to do yourself, but there are good plugins. Check this out: http://masonry.desandro.com/ — kapoko, Apr 12 '17 at 19:48
[masonry](http://masonry.desandro.com/), [isotope](http://isotope.metafizzy.co/), [bootstrap-waterfall](https://github.com/Mystist/bootstrap-waterfall) (pintrest-like script) or CSS columns. Here is a [similar question](http://stackoverflow.com/questions/43118578/jquery-load-more-masonry-elements/43164420#43164420) I answered recently, which, among others, lists your possible options. — tao, Apr 12 '17 at 20:13

score 1 · Answer 1 · answered Apr 12 '17 at 20:08

1

You can do it with flex but not in rows. You'll have to use flex-direction: column; and align-content property. Check this fiddle.

https://jsfiddle.net/4evoq3nt/1/

answered Apr 12 '17 at 20:08

Varin

2,354
2
20
37

hi, @Varin only problem i have with this is height, i can't use height because content is dynamic and i am not sure about height – Muhammad Arslan Apr 13 '17 at 20:30
This solution grows horizontally. Keep adding items and you get a horizontal scrollbar instead of a vertical one, which is ***not what the average user expects*** from this layout. Therefore your solution does not answer the question. I doubt you personally would ever use this when having an unknown stream of items to be displayed in columns. `Flexbox` cannot be used for `masonry`/`pinterest` layout. Consider CSS columns, but that has a major content reflow problem on resize or adding more items. – tao Apr 13 '17 at 20:45

score 1 · Accepted Answer · answered Apr 12 '17 at 20:09

The effect you're looking for is called Masonry, or the Pinterest effect as far as I know. This is a good plugin for it.

Here's your code with masonry implemented: https://jsfiddle.net/jwjkt933/

jQuery code used for initialising masonry:

(function($) {
  $('.flex-container').masonry({
    columnWidth: 152,
    gutter: 10,
    itemSelector: '.flex-item'
  });
})(jQuery);

This example also needs jQuery, although you can also initialise masonry with pure JS.

score 0 · Answer 3 · answered Apr 12 '17 at 20:06

You need to set a minimum height and the height a specific way for flex-item, that way despite the content, you will always get the same sized boxes throughout flex-container, as show here:

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
  width: 400px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin: 0 10px 10px 0;
  float: left;
  padding: 15px;
  height:100%;
  min-height: 75px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

Make sure to take note of the min-height and height parameters used in the example above

Positioning issue when display items like gallery items

3 Answers3