如何使用 grid-template-areas 在全视口高度构建基于 3 x 3 tile 的 CSS 网格？答案

【问题标题】：How can I build a 3 x 3 tile based CSS grid with sidebar at full viewport height using grid-template-areas?如何使用 grid-template-areas 在全视口高度构建基于 3 x 3 tile 的 CSS 网格？
【发布时间】：2021-11-05 01:29:01
【问题描述】：

如何在不改变DOM顺序的情况下，实现https://ibb.co/Y8TQLcC这样的布局？我被网格模板区域困住了。

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
display: grid;
grid-template-areas: 
  "one three";
   "two"
}

.one {
  grid-area: one;
  border: 1px solid;
}

.three {
grid-area: three;
  border: 1px solid;
}

.two {
grid-area: two;
  border: 1px solid;
}

<div class="parent">
    <div class="one">one</div>
    <div class="three">three</div>
    <div class="two">two</div>
</div>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

您的grid-template-areas 定义不正确。可以把它想象成一个粗略的表格/网格，同时告诉 css 哪些行和列的单元格在输出上以哪种方式作用。

将grid-template-areas 更改为以下将起作用：

grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
}

完整的代码变成这样：

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
display: grid;
grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
grid-template-rows: auto; height: 100vh;
}

.one {
  grid-area: one;
  border: 1px solid;
}

.three {
grid-area: three;
  border: 1px solid;
}

.two {
grid-area: two;
  border: 1px solid;
}

<div class="parent">
    <div class="one">one</div>
    <div class="three">three</div>
    <div class="two">two</div>
</div>

【讨论】：

仅此而已？天哪，这么简单的修复！谢谢！但是如何让它全高呢？
@AliciaY 欢迎，如果有帮助，请点赞并勾选答案:)
好的，只要加上grid-template-rows: auto; height: 100vh;就行了
@AliciaY 完成 :)
@AliciaY 我还更新了网格模板区域，使其看起来与您所需的网格完全一样

【解决方案2】：

您想要的布局是基于 3 x 3 平铺的网格布局，在全视口高度。

为了实现这一点，您必须相应地修复网格容器元素 .parent grid-template-areas。

另外，使用viewport-percentage lengths unit vh 将.parent 的height 设置为视口的100%：

.parent {
  display: grid;
  height: 100vh;
  grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
}

【讨论】：