<div class="container">
  <div class="item item-a"></div>
  <div class="item item-b"></div>
  <div class="item item-c"></div>
  <div class="item item-d"></div>
</div>

<style>
.item-a {
  grid-area: header;
  background: blue;
}
.item-b {
  grid-area: main;
  background: yellow;
}
.item-c {
  grid-area: sidebar;
  background: red;
}
.item-d {
  grid-area: footer;
  background: green;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
</style>

我的代码

这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个main区域、一个空单元格和一个sidebar区域组成。 最后一行是footer区域组成。

你的声明中的每一行都需要有相同数量的单元格。
您可以使用任意数量的相邻的.来声明单个空单元格。 只要这些点号之间没有空格，他们就代表了一个单一的单元格。

justify-items

沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。

值：

• start: 内容与网格区域的左端对齐
• end: 内容与网格区域的右端对齐
• center: 内容位于网格区域的中间位置
• stretch: 内容宽度占据整个网格区域空间(这是默认值)

.container {
  justify-items: start | end | center | stretch;
}

举例：

.container {
  justify-items: start;
}

justify-items: start;

.container {
  justify-items: center;
}

justify-items: center;

align-items

沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。

值：

• start: 内容与网格区域的顶端对齐
• end: 内容与网格区域的底部对齐
• center: 内容位于网格区域的垂直中心位置
• stretch: 内容高度占据整个网格区域空间(这是默认值)

.container {
  align-items: start | end | center | stretch;
}

justify-content

有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。

值：

• start - 网格与网格容器的左边对齐
• end - 网格与网格容器的右边对齐
• center - 网格与网格容器的中间对齐
• stretch - 调整g rid item 的大小，让宽度填充整个网格容器
• space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
• space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
• space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

举例：

.container {
  justify-content: start;
}

Example of justify-content set to start

---

简易写法（推荐）

image.png

http://js.jirengu.com/qenob/1/edit?html,css,output