具体可参考阮一峰老师的介绍
这里只记录一些容易产生误解的地方。

justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
第一次看我想大多都会认为这不就是设置内容的对齐方式吗，是吧？
答案：不是，不然我也不会专门写这个笔记。

我的理解：

justify-items和align-items是设置内容区的开始方式，不是内容的对齐方式。默认是 stretch 的效果；

比如现在一个宽高都是 50px 的正方形区域，默认整个区域都是内容区域，比如设置背景为红色，那回看到一个宽高都是 50px 的正方形，这应该都能理解；

.container{
    width: 50px;
    height: 50px;
}

<div class="container"></div>

如果设置了justify-items:start(需要启用 grid 模式)，则内容区域则是从左开始，直到够现实内容即可，剩下的就不是内容区域了，比如下面的效果图是每个元素都是 80px 的正方形，但是背景色只是显示了由内容的地方，设置成 stretch 就成了上面的效果了。

在子元素上设置的justify-self和这个一个意思。