I have the following grid layout:

```
<div class="main-page">
  <div class="side-bar"></div>
  <div class="nav-bar"></div>
  <div class="index-view"></div>
</div>

```

[![enter image description here](https://i.stack.imgur.com/NbSwK.png)](https://i.stack.imgur.com/NbSwK.png)

and I am trying to insert a new div between sidebar and index such that the resulting layout will be like:

```
<div class="main-page">
  <div class="side-bar"></div>
  <div class="nav-bar"></div>
  <div class="profile-pane"></div>
  <div class="index-view"></div>
</div>

```

[![enter image description here](https://i.stack.imgur.com/2edCw.png)](https://i.stack.imgur.com/2edCw.png)

My attempt so far has been:

```
.main-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 72px 1fr;
  height: 100%;
}

.main-page > .side-bar {
  display: grid;
  grid-row: 1/4;
  width: 80px;
}

.main-page > .profile-pane {
  width: 260px;
  position: relative;
  grid-row: 2/4;
}

.main-page > .index-view {
  grid-row: 2/4;
}

```

This renders a huge space between `profile` and `index` and compresses `index` to the right. I've been trying different values for the `grid-row` property but to no avail. However, if I remove either one of `profile` and `index`, the remaining div will render nicely and right beside the sidebar. How do I achieve the second layout?