How to Make a Grid for Elements with different heights?
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!
javascript html css web-applications
asked Nov 21 '18 at 12:57
user10357213user10357213
311
add a comment |
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!
javascript html css web-applications
asked Nov 21 '18 at 12:57
user10357213user10357213
311
remove them how? shift up more blocks?
– epascarello
Nov 21 '18 at 12:59
Check this out, I think it's what you desire: haltu.github.io/muuri
– Mr. Polywhirl
Nov 21 '18 at 13:00
I want to 'remove' the white space, so that the tiles in the second line will take up the empty place. So the big tile should take up 2 rows
– user10357213
Nov 21 '18 at 13:03
So did you try floating them?
– epascarello
Nov 21 '18 at 13:20
add a comment |
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!
javascript html css web-applications
asked Nov 21 '18 at 12:57
user10357213user10357213
311
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!
javascript html css web-applications
javascript html css web-applications
asked Nov 21 '18 at 12:57
user10357213user10357213
311
asked Nov 21 '18 at 12:57
user10357213user10357213
311
asked Nov 21 '18 at 12:57
user10357213user10357213
311
asked Nov 21 '18 at 12:57
user10357213user10357213
311
asked Nov 21 '18 at 12:57
user10357213user10357213
311
311
remove them how? shift up more blocks?
– epascarello
Nov 21 '18 at 12:59
Check this out, I think it's what you desire: haltu.github.io/muuri
– Mr. Polywhirl
Nov 21 '18 at 13:00
I want to 'remove' the white space, so that the tiles in the second line will take up the empty place. So the big tile should take up 2 rows
– user10357213
Nov 21 '18 at 13:03
So did you try floating them?
– epascarello
Nov 21 '18 at 13:20
add a comment |
remove them how? shift up more blocks?
– epascarello
Nov 21 '18 at 12:59
Check this out, I think it's what you desire: haltu.github.io/muuri
– Mr. Polywhirl
Nov 21 '18 at 13:00
I want to 'remove' the white space, so that the tiles in the second line will take up the empty place. So the big tile should take up 2 rows
– user10357213
Nov 21 '18 at 13:03
So did you try floating them?
– epascarello
Nov 21 '18 at 13:20
remove them how? shift up more blocks?
– epascarello
Nov 21 '18 at 12:59
remove them how? shift up more blocks?
– epascarello
Nov 21 '18 at 12:59
Check this out, I think it's what you desire: haltu.github.io/muuri
– Mr. Polywhirl
Nov 21 '18 at 13:00
Check this out, I think it's what you desire: haltu.github.io/muuri
– Mr. Polywhirl
Nov 21 '18 at 13:00
I want to 'remove' the white space, so that the tiles in the second line will take up the empty place. So the big tile should take up 2 rows
– user10357213
Nov 21 '18 at 13:03
I want to 'remove' the white space, so that the tiles in the second line will take up the empty place. So the big tile should take up 2 rows
– user10357213
Nov 21 '18 at 13:03
So did you try floating them?
– epascarello
Nov 21 '18 at 13:20
So did you try floating them?
– epascarello
Nov 21 '18 at 13:20
add a comment |
3 Answers
3
active
oldest
votes
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/
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
add a comment |
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>answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
add a comment |
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)
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412555%2fhow-to-make-a-grid-for-elements-with-different-heights%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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/
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
add a comment |
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/
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
add a comment |
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/
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
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/
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
edited Nov 26 '18 at 11:51
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
answered Nov 21 '18 at 13:41
JustAMicrobeJustAMicrobe
14019
14019
add a comment |
add a comment |
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>answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
add a comment |
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>answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
add a comment |
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>answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
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>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>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>answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
answered Nov 21 '18 at 13:25
Mr. PolywhirlMr. Polywhirl
17.4k84991
17.4k84991
add a comment |
add a comment |
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)
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
add a comment |
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)
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
add a comment |
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)
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
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)
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
answered Nov 26 '18 at 11:50
JustAMicrobeJustAMicrobe
14019
14019
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412555%2fhow-to-make-a-grid-for-elements-with-different-heights%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
remove them how? shift up more blocks?
– epascarello
Nov 21 '18 at 12:59
Check this out, I think it's what you desire: haltu.github.io/muuri
– Mr. Polywhirl
Nov 21 '18 at 13:00
I want to 'remove' the white space, so that the tiles in the second line will take up the empty place. So the big tile should take up 2 rows
– user10357213
Nov 21 '18 at 13:03
So did you try floating them?
– epascarello
Nov 21 '18 at 13:20