CSS网格不适合我答案

【问题标题】：CSS grid not working for meCSS网格不适合我
【发布时间】：2018-10-05 12:50:00
【问题描述】：

我遇到了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>

【问题讨论】：

接受的答案一针见血。但还要注意"head head head" "side" "content content" 是无效代码。 grid-template-areas 的字符串值必须具有相同的列数，否则将忽略该规则。 stackoverflow.com/q/45647833/3597276
好的，请注意..谢谢队友

标签： html css css-grid

【解决方案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>

【讨论】：