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

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 ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>

</body>

</html>

CodePudding user response：

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 ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>

</body>

</html>