Aligning grid cells with different heights in 2 columns

Question

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>

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

score 0 · Answer 1 · answered Nov 23 '18 at 14:02

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>

Aligning grid cells with different heights in 2 columns

1 Answers1