html - 试图整理 CSS 网格布局时遇到了困难

Question

这是我第一次在元素中使用 CSS 网格，因此，如果这是一个愚蠢的问题，我深表歉意，我会尝试尽可能具体。

我正在构建的网站的设计计划是这样的:You can see the layout I'm trying to achieve with this

但是，我在定位其中一个“网格框”内包含的 Logo 时遇到了困难，正如您从以下屏幕截图中看到的那样: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.

我将链接下面的 HTML 代码:

.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>

任何回复将不胜感激!

非常感谢， 亚当

Answer 1

坚持顶部两行，我会添加一个变换以使其穿过列

.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>