时间戳

首页 > 解决方案 > 如何使用 grid-template-areas 在全视口高度构建一个 3 x 3 tile 的 CSS 网格？

html - 如何使用 grid-template-areas 在全视口高度构建一个 3 x 3 tile 的 CSS 网格？

问题描述

如何在不更改 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>

标签： htmlcsscss-grid

解决方案

您所需的布局是基于 3 x 3 瓦片的全视口高度的网格布局。

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

此外，使用视口百分比长度单位height设置为.parent视口的 100% ： vh

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

推荐阅读