CSS网格不适合我

Question

我有问题display: grid.我想要标题顶部和33%宽度侧边栏列和66%内容.而且我已经宣布了grid-area.你能帮助我吗？

.head {
  grid-area: head;
  background: tomato;
}

.side {
  grid-area: side;
  background: purple;
}

.content {
  grid-area: content;
  background: orange;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    "head head head"
    "side" "content content"
}

.box {
  padding: 20px;
  height: 100px;
}

<div class="wrapper">
  <div class="box head">
  </div>
  <div class="box side">
  </div>
  <div class="box content">
  </div>
</div>

Answer 1

只需移动侧边栏旁边的内容即可

.head {
  grid-area: head;
  background: tomato;
}

.side {
  grid-area: side;
  background: purple;
}

.content {
  grid-area: content;
  background: orange;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    "head head head"
    "side content content"
}

.box {
  padding: 20px;
  height: 100px;
}

<div class="wrapper">
  <div class="box head">
  </div>
  <div class="box side">
  </div>
  <div class="box content">
  </div>
</div>