命名网格

grid-template-areas

在父容器中通过指定命名区域来简化布局的管理。它允许你为容器中的不同区域分配名称，这样可以通过区域名称而不是位置索引来设置元素的位置，使代码更加直观和可读。

  grid-template-areas:
								    "header header"
								    "nav main"
								    "footer footer";

每个字符串代表网格中的一行，行中的每个区域用空格分隔，区域名称可以自定义，可以重复

如果某个区域没有必要命名。我们可以使用.对一个区域进行占位：

  grid-template-areas:
								    ". ."
								    ". ."
								    "footer footer";

grid-area

grid-area可以一次性画出网格线

number

grid-area: row-start / column-start / row-end / column-end;

相当于：

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

string

grid-area用于 子元素，告诉它应该放到哪个区域名中

grid-area:栅格名

html

<div class="box">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

css

.box {
  height: 500px;
  width: 350px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}
header {
  background-color: skyblue;
  grid-area: header;
}
nav {
  background-color: greenyellow;
  grid-area: nav;
}
main {
  background-color: #fff;
  grid-area: main;
}
footer {
  background-color: yellow;
  grid-area: footer;
}

优势

无需记 grid-column-start / end、grid-row-start / end 的数字位置，全靠名字。

传统写法：

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

使用命名网格：

.header {
  grid-area: header;
}

更可读，也更好维护。