How to Make a Grid for Elements with different heights?

Question

I'm working on a webapp and I am encountering the following problem:

I want to display a Grid of Tiles which can have a different blockHeight and Width.

For compatibility reasons I can not use CSS GRID.

I get a List of Tiles with different blockHeights and blockWidths to display in my grid. E.g. a tile with a blockHeight of 2 (like the first one in the picture above) now just has a height twice as high. This obviously wont create another Row, so there is an empty space below the two small tiles.

How can I remove the empty spaces of my grid without using CSS GRID?

Thanks in advance!

Answer 1

i'm sorry, but can't you just use css?

.floatingItems {
  float: left;
}

That way the items will alway try to align to the lefthand side. That way you would not have to include a library.

fiddle: https://jsfiddle.net/49nq3afx/4/

Answer 2

user10357213,

you have two open Questions. If the answeres given were helpful, it would be nice if you accept the respective answer. Or at least reply if and why this answer does not fit you.

(can not comment jet, thats why i post another answer. sorry)

Answer 3

Using the following library, you can achieve this:

https://haltu.github.io/muuri/

The CSS calculations for the box sizes are proportional to the default box size; accounting for the margins.

var grid = new Muuri('.grid', {
  dragEnabled: true
});

.grid {
  position: relative;
  background: #6EB3CA
}
.item {
  display: block;
  position: absolute;
  width: 64px;  /* Default 1 unit */
  height: 64px; /* Default 1 unit */
  margin: 4px;  /* Margin */
  z-index: 1;
  background: #fff;
  color: #000;
  border-radius: 4px;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 64px;
}

.item-6x2 {
  width:  424px; /* (64 * 6) + (4 * 10) */
  height: 136px; /* (64 * 2) + (4 *  2) */;
}
.item-2x1 {
  width:  136px; /* (64 * 2) + (4 * 2) */
  height:  64px; /* (64 * 1) + (4 * 0) */;
}
.item-6x2 .item-content {
  line-height: 136px;
}

<script src="https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js"></script>
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.min.js"></script>
<script src="https://unpkg.com/muuri@0.7.1/dist/muuri.min.js"></script>

<div class="grid">
  <div class="item item-6x2">
    <div class="item-content">
      6×2
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
</div>