How to align grid items vertically using display:grid and fill all vertical empty space?

Question

I use display:grid not flex to display some divs.

Here's what my page looks like:

And here is how I would like it to look:

And here's the code:

.container {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 40px 40px;
  grid-auto-flow: row dense;
  justify-items: stretch;
  align-items: stretch;
  grid-template-areas: "left1 center-div right1" "left1 center-div right2" "left2 center-div right3";
  width: 100%;
  height: 100%;
}

.left1 {
  grid-area: left1;
}

.left2 {
  grid-area: left2;
}

.center-div {
  grid-area: center-div;
}

.right1 {
  grid-area: right1;
}

.right2 {
  grid-area: right2;
}

.right3 {
  grid-area: right3;
}

<div class="container owl-carousel owl-theme">

  <div class="grid-item left1">
    left image 1
  </div>

  <div class="grid-item left2">
    left image 2
  </div>

  <div class="grid-item center-div">
    center image
  </div>

  <div class="grid-item right1">
    right image 1
  </div>

  <div class="grid-item right2">
    right image 2
  </div>

  <div class="grid-item right3">
    right image 3
  </div>

</div>

In short, I want to bring the divs closer so that they appear as they are in the second photo

Answer 1

Using CSS Grid

Following demo shows how you can achieve the desired layout using just the grid layout.

Its a 6 x 3 grid where items on the left span 3 rows each and the items on the right span 2 rows each. The item in the center spans all 6 rows.

Each grid items is adjusted in its place using the grid-row and grid-column properties.

The trick to achieving this layout is having more rows than columns.

.container {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 30px;
  height: 100vh;
}

.grid-item {
  background: #eee;
  width: 100%;
}

.center {
  grid-row: 1 / span 6;
  grid-column: 2 / span 1;
}

.left1 {
  grid-row: 1 / span 3;
  grid-column: 1 / span 1;
}

.left2 {
  grid-row: 4 / span 3;
  grid-column: 1 / span 1;
}

.right1,
.right2,
.right3 {
  grid-column: 3 / span 1;
}

.right1 { grid-row: 1 / span 2; }
.right2 { grid-row: 3 / span 2; }
.right3 { grid-row: 5 / span 2; }

<div class="container">
  <div class="grid-item left1">left1</div>
  <div class="grid-item left2">left2</div>
  <div class="grid-item center">center</div>
  <div class="grid-item right1">right1</div>
  <div class="grid-item right2">right2</div>
  <div class="grid-item right3">right3</div>
</div>

Using CSS Grid along with Flexbox

Another option is to have a 1 x 3 grid and make each grid column a flex container.

You will need to change the structure of the HTML if you use this approach.

:root {
  --spacing: 30px;
}

.container {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  grid-gap: var(--spacing);
  height: 100vh;
}

.grid-item {
  display: flex;
}

.grid-item div {
  background: #eee;
  flex-basis: 100%;
}

.col-1,
.col-3 {
  flex-direction: column;
  justify-content: space-between;
}

.margin-bottom {
  margin-bottom: var(--spacing);
}

<div class="container">
  <div class="grid-item col-1">
    <div class="margin-bottom">left1</div>
    <div>left2</div>
  </div>
  <div class="grid-item col-2">
    <div>center</div>
  </div>
  <div class="grid-item col-3">
    <div class="margin-bottom">right1</div>
    <div class="margin-bottom">right2</div>
    <div>right3</div>
  </div>
</div>