Aligning grid cells with different heights in 2 columns [duplicate]
0
This question already has an answer here:
CSS-only masonry layout
1 answer
I have 2 columns in my grid. All items have different heights, and when one cells is bigger than the one next to it, they get the same size. The actual content of the smaller cell, doesn't extend or stretch, but the cell gets bigger. Here is an example:
How can I prevent this? In this case I want the smaller (div one) cell to get size only as much as it needs so then div three can go up and don't leave huge gap between them.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.wrapper > div {
border: 2px solid #ffa94d;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.one {
height: 150px;
}
.two {
height: 200px;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="seven">Seven</div>
<div class="eight">Eight</div>
</div>
css css-grid
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 15:17
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
0
This question already has an answer here:
CSS-only masonry layout
1 answer
I have 2 columns in my grid. All items have different heights, and when one cells is bigger than the one next to it, they get the same size. The actual content of the smaller cell, doesn't extend or stretch, but the cell gets bigger. Here is an example:
How can I prevent this? In this case I want the smaller (div one) cell to get size only as much as it needs so then div three can go up and don't leave huge gap between them.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.wrapper > div {
border: 2px solid #ffa94d;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.one {
height: 150px;
}
.two {
height: 200px;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="seven">Seven</div>
<div class="eight">Eight</div>
</div>
css css-grid
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 15:17
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Try using align-self: start;, hope it will work...
– CodeBlaze
Nov 23 '18 at 13:55
I suspect that this is not possible but we need to see what the expected design is supposed to look like. What you are describing is not a grid.
– Paulie_D
Nov 23 '18 at 15:16
add a comment |
0
0
0
This question already has an answer here:
CSS-only masonry layout
1 answer
I have 2 columns in my grid. All items have different heights, and when one cells is bigger than the one next to it, they get the same size. The actual content of the smaller cell, doesn't extend or stretch, but the cell gets bigger. Here is an example:
How can I prevent this? In this case I want the smaller (div one) cell to get size only as much as it needs so then div three can go up and don't leave huge gap between them.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.wrapper > div {
border: 2px solid #ffa94d;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.one {
height: 150px;
}
.two {
height: 200px;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="seven">Seven</div>
<div class="eight">Eight</div>
</div>
css css-grid
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
This question already has an answer here:
CSS-only masonry layout
1 answer
I have 2 columns in my grid. All items have different heights, and when one cells is bigger than the one next to it, they get the same size. The actual content of the smaller cell, doesn't extend or stretch, but the cell gets bigger. Here is an example:
How can I prevent this? In this case I want the smaller (div one) cell to get size only as much as it needs so then div three can go up and don't leave huge gap between them.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.wrapper > div {
border: 2px solid #ffa94d;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.one {
height: 150px;
}
.two {
height: 200px;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="seven">Seven</div>
<div class="eight">Eight</div>
</div>
This question already has an answer here:
CSS-only masonry layout
1 answer
css css-grid
css css-grid
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
edited Nov 23 '18 at 15:15
Paulie_D
74.6k96387
74.6k96387
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
asked Nov 23 '18 at 13:49
ff34f34f34fff34f34f34f
1
1
marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 15:17
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Paulie_D css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 15:17
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Try using align-self: start;, hope it will work...
– CodeBlaze
Nov 23 '18 at 13:55
I suspect that this is not possible but we need to see what the expected design is supposed to look like. What you are describing is not a grid.
– Paulie_D
Nov 23 '18 at 15:16
add a comment |
Try using align-self: start;, hope it will work...
– CodeBlaze
Nov 23 '18 at 13:55
I suspect that this is not possible but we need to see what the expected design is supposed to look like. What you are describing is not a grid.
– Paulie_D
Nov 23 '18 at 15:16
Try using align-self: start;, hope it will work...
– CodeBlaze
Nov 23 '18 at 13:55
Try using align-self: start;, hope it will work...
– CodeBlaze
Nov 23 '18 at 13:55
I suspect that this is not possible but we need to see what the expected design is supposed to look like. What you are describing is not a grid.
– Paulie_D
Nov 23 '18 at 15:16
I suspect that this is not possible but we need to see what the expected design is supposed to look like. What you are describing is not a grid.
– Paulie_D
Nov 23 '18 at 15:16
add a comment |
1 Answer
1
active
oldest
votes
0
Here's one way to do it:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div {
width: 630px;
background-color: #F0F0F0
}
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
</style>
</head>
<body>
<div>
<article style="height:100px; background:blue"></article>
<article style="height:200px;background:green"></article>
<article style="height:300px;background:red"></article>
<article style="height:200px;background:purple"></article>
<article style="height:200px;background:black"></article>
<article style="height:100px;background:orange"></article>
</div>
</body>
</html>
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Here's one way to do it:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div {
width: 630px;
background-color: #F0F0F0
}
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
</style>
</head>
<body>
<div>
<article style="height:100px; background:blue"></article>
<article style="height:200px;background:green"></article>
<article style="height:300px;background:red"></article>
<article style="height:200px;background:purple"></article>
<article style="height:200px;background:black"></article>
<article style="height:100px;background:orange"></article>
</div>
</body>
</html>
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
add a comment |
0
Here's one way to do it:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div {
width: 630px;
background-color: #F0F0F0
}
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
</style>
</head>
<body>
<div>
<article style="height:100px; background:blue"></article>
<article style="height:200px;background:green"></article>
<article style="height:300px;background:red"></article>
<article style="height:200px;background:purple"></article>
<article style="height:200px;background:black"></article>
<article style="height:100px;background:orange"></article>
</div>
</body>
</html>
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
add a comment |
0
0
0
Here's one way to do it:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div {
width: 630px;
background-color: #F0F0F0
}
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
</style>
</head>
<body>
<div>
<article style="height:100px; background:blue"></article>
<article style="height:200px;background:green"></article>
<article style="height:300px;background:red"></article>
<article style="height:200px;background:purple"></article>
<article style="height:200px;background:black"></article>
<article style="height:100px;background:orange"></article>
</div>
</body>
</html>
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
Here's one way to do it:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div {
width: 630px;
background-color: #F0F0F0
}
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
</style>
</head>
<body>
<div>
<article style="height:100px; background:blue"></article>
<article style="height:200px;background:green"></article>
<article style="height:300px;background:red"></article>
<article style="height:200px;background:purple"></article>
<article style="height:200px;background:black"></article>
<article style="height:100px;background:orange"></article>
</div>
</body>
</html>
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
answered Nov 23 '18 at 14:02
Eric LimaEric Lima
166
166
add a comment |
add a comment |
Try using align-self: start;, hope it will work...
– CodeBlaze
Nov 23 '18 at 13:55
I suspect that this is not possible but we need to see what the expected design is supposed to look like. What you are describing is not a grid.
– Paulie_D
Nov 23 '18 at 15:16