CSS grid with columns of unequal height and width

Question

I have 5 boxes: three on the first row, the next two on the second row:

I want all the boxes but the second to be of equal height and the 5^th box to go right under the 3^th.

I tried this with flexbox and I am now trying it with display: grid. I am looking for a CSS only solution, if possible.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: min-content;
  grid-gap: 0;
  background-color: #2196F3;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
  font-size: 30px;
}
.item4 {
  grid-column-start: 1;
  grid-column-end: 3;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

What I am looking for is well illustrated in the picture bellow:

What shall I do to achieve the desired result?

What is this supposed to look like....it doesn't sound like a **grid** at all? — Paulie_D, Jun 05 '18 at 14:23
Something like this: - https://codepen.io/Paulie-D/pen/JZXzye ?? — Paulie_D, Jun 05 '18 at 14:36
Can't really place what you're trying to do. Is it something [like this](https://jsfiddle.net/ut8ojnvd/) that you're after? — Joseph Marikle, Jun 05 '18 at 14:41
@Paulie_D It is **not** a grid. I am trying to achieve something like [THIS](https://jsfiddle.net/dmvr6t7h/64/), *without a negative margin* on the last element. I don't care if it is a grid or not. — Razvan Zamfir, Jun 05 '18 at 14:53
If it's not a grid then css-grid **obviously** does not apply. The linked duplicate of your [**other quesion**](https://stackoverflow.com/questions/50697400/break-the-natural-flexbox-flow-case) applies unless you can change the structure. — Paulie_D, Jun 05 '18 at 14:57
duplicate - https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally — Paulie_D, Jun 05 '18 at 14:57
@Paulie_D Not a duplicate: my columns are *not all equal in width*. — Razvan Zamfir, Jun 05 '18 at 15:02
They don't have to be...the point here is that this is **not possible with CSS.** — Paulie_D, Jun 05 '18 at 15:13
@Paulie_D I don't *insist* on a CSS only solution. (I have stated "if possible"). MY questions make sense and are **not** duplicate (except of each other, but I have asked the second one because the first was marked as duplicate). — Razvan Zamfir, Jun 05 '18 at 15:18
Then the duplicate still applies, using the javascript masonry option. — Paulie_D, Jun 05 '18 at 15:23

score 3 · Answer 1 · answered Jun 06 '18 at 11:02

Here's one method using line-based placement.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 5px;
  padding: 5px;
  height: 100vh;
  background-color: #2196F3;
}

/* line-based placement */
.item1 { grid-column: 1 / 2; grid-row: 1 / 4; }
.item2 { grid-column: 2 / 3; grid-row: 1 / 8; }
.item3 { grid-column: 3 / 4; grid-row: 1 / 4; }
.item4 { grid-column: 1 / 3; grid-row: 8 / 11; }
.item5 { grid-column: 3 / 4; grid-row: 4 / 11; }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }

<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

Here's another method using grid-template-areas.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 5px;
  padding: 5px;
  height: 100vh;
  background-color: #2196F3;
  
  grid-template-areas:
  
    " item1 item2 item3 "
    " item1 item2 item3 "
    " item1 item2 item3 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    "   .   item2 item5 "
    " item4 item4 item5 "
    " item4 item4 item5 "
    " item4 item4 item5 ";
}

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }

<div class="grid-container">
  <div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
  <div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
  <div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
  <div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

IP_ · Accepted Answer · 2018-06-05T16:42:35.757

Use grid-template-areas for parent container and specify grid-area for children items.

.grid-container {
  display: grid;
  grid-template-areas: 'left middle right';
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-gap: 0;
  background-color: #2196F3;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: 1px solid #ccc;
  font-size: 30px;
}
.item1 {
  grid-area: left;
  grid-row: auto;
}
.item2 {
  grid-area: middle;
  grid-row: auto / span 2;
};
.item3 {
  grid-area: right;
  grid-row: auto;
};
.item4 {
  grid-area: left;
  grid-row: auto;
};
.item5 {
  grid-area: right;
  grid-row: auto;
}

<div class="grid-container">
      <div class="item1"><p><strong>Item1</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
      <div class="item2"><p><strong>Item2</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
      <div class="item3"><p><strong>Item3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>  
      <div class="item4"><p><strong>Item4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
      <div class="item5"><p><strong>Item5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>

Great stuff but the layout I am trying to get looks different. I have added an illustration. — Razvan Zamfir, Jun 05 '18 at 18:11
I don't like those gaps in first and last columns at the bottom of top item. — user8620575, Aug 01 '22 at 18:52

CSS grid with columns of unequal height and width

2 Answers2

Linked