'How to make a grid item span one and a half row?

I am trying to make a layout and everything is fine except the item3 and item8. I want both of these items to span along the rows such that both of them equally occupy space along the row. But I am unable to find a way to divide the space between them. Here is the picture attached.I want to make both of the items marked in yellow be equal in size along the rows.

Sorry forgot to attach the code. Here is the code:

* {
  margin: 0;
  padding: 0;
}

#wrapper {
  display: flex;
  flex-flow: column wrap;
}

#menu {
  background-color: blue;
  width: 20%;
  height: 100vh;
  box-shadow: 1px 1px 5px 1px black;
}

#navbar {
  position: absolute;
  left: 20%;
  width: 80%;
  height: 15vh;
  background-color: black;
}

#projectItems {
  position: absolute;
  left: 20%;
  top: 15vh;
  width: 80%;
  height: 85vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1%;
}

.item:nth-child(even) {
  background-color: aquamarine;
}

.item {
  box-shadow: 1px 1px 5px 1px black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="dashboard.js" defer></script>
</head>

<body>
  <div id="wrapper">
    <div id="menu"></div>
    <div id="navbar"></div>
    <div id="projectItems">
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
      <div class="item item4"></div>
      <div class="item item5"></div>
      <div class="item item6"></div>
      <div class="item item7"></div>
      <div class="item item8"></div>
    </div>
  </div>

</body>

</html>

css

Solution 1:^[1]

For this purpose you need to specify location for every grid that you have. I prefer do in with "grid-template-areas". But here is another way. So choose what you prefer.

* {
  margin: 0;
  padding: 0;
}

#wrapper {
  display: flex;
  flex-flow: column wrap;
}

#menu {
  background-color: blue;
  width: 20%;
  height: 100vh;
  box-shadow: 1px 1px 5px 1px black;
}

#navbar {
  position: absolute;
  left: 20%;
  width: 80%;
  height: 15vh;
  background-color: black;
}

#projectItems {
  position: absolute;
  left: 20%;
  top: 15vh;
  width: 80%;
  height: 85vh;
  display: grid;
  gap: 1%;
  grid-template-areas:
    "item1 item2 item3"
    "item1 item2 item3"
    "item4 item5 item3"
    "item4 item5 item6"
    "item7 item8 item6"
    "item7 item8 item6";
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item8 {
  grid-area: item8;
}

.item7 {
  grid-area: item7;
}

.item:nth-child(even) {
  background-color: aquamarine;
}

.item {
  box-shadow: 1px 1px 5px 1px black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="dashboard.js" defer></script>
</head>

<body>
  <div id="wrapper">
    <div id="menu"></div>
    <div id="navbar"></div>
    <div id="projectItems">
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
      <div class="item item4"></div>
      <div class="item item5"></div>
      <div class="item item6"></div>
      <div class="item item7"></div>
      <div class="item item8"></div>
    </div>
  </div>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Aaron Vasilev

'How to make a grid item span one and a half row?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]