Stumped trying to sort out CSS grids layout

Question

This is my first time using CSS Grids on a project so apologies if this is a daft question, I'll try to be as specific as possible.

My design plan for a website I'm building is this: You can see the layout I'm trying to achieve with this

However I'm having difficulties with positioning the logo contained inside one of the 'grid boxes' as you can see from this screen shot: I'm trying to move the SVG logo to the right hand side and have the titles to the left of it, although for some reason the logo has taken up the entire row and forced the text down.

I'll link the HTML code below:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 15% 250px;
  height: 100vh;
}

.box1,
.box3,
.box5,
.box6,
.box8 {
  background-color: #ce6c47;
}

.box1 {
  grid-column: 1/3;
}

.box3 {
  grid-column: 1/3;
}

.box2,
.box4,
.box7 {
  background-color: #ef8354;
}

.box4 {
  grid-row: 2/4;
}

.box9 {
  grid-column: 2/4;
  background-color: #333533;
}

<div class="wrapper">
  <div class="box box1">
    <ul id="nav-wrapper">
      <li>History</li>
      <li>Services</li>
      <li>Work</li>
      <li>Contact</li>
    </ul>
  </div>
  <div class="box box2">Box 2</div>
  <div class="box box3">
    <div class="text">
      <h1>MHP</h1>
      <h2>CDM Coordination and<br>Quantity Surveying Services</h2>
    </div>
  </div>
  <div class="box box4">
    <object>
        <embed src="better 3.svg">
      </object>
  </div>
  <div class="box box5">Box 5</div>
  <div class="box box6">Box 6</div>
  <div class="box box7">Box 7</div>
  <div class="box box8">Box 8</div>
  <div class="box box9">Box 9</div>
</div>

Any responses would be massively appreciated!

Many thanks, Adam

Answer 1

Sticking to the top two rows I'd add a transform to make it cross the column

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 15% 250px;
  height: 100vh;
}
.box {
  border: 1px solid green;
}
.box1,
.box3 {
  background-color: #ce6c47;
}
.box1 {
  grid-column: 1/3;
}
.box2,
.box4 {
  background: brown;
}
.box3 {
  grid-column: 1/3;
}
.box4 {
  display: flex;
  align-items: center;
}
.box4 img {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

<div class="wrapper">
  <div class="box box1">
    <ul id="nav-wrapper">
      <li>History</li>
      <li>Services</li>
      <li>Work</li>
      <li>Contact</li>
    </ul>
  </div>
  <div class="box box2">Box 2</div>
  <div class="box box3">
    <div class="text">
      <h1>MHP</h1>
      <h2>CDM Coordination and<br>Quantity Surveying Services</h2>
    </div>
  </div>
  <div class="box box4">
    <img src="http://www.fillmurray.com/140/100" alt="">
  </div>
</div>

Answer 2

Your box4 which contains the image has grid-row: 2/4; and the box3 has grid-row: 1/3;, making the total not 4/4, so you need to rewrite this. Try this:

.box4 {
  grid-row: 2/4;
}

Let me know how it goes!