非常典型的grid布局。
容器container，項目Items。
二、容器屬性
1、grid-template-*
grid-template- * 拓展，
grid-template-columns:repeat(3,100px);相當於
grid-template-columns:100px 100px 100px;
fr滿常用的。等分，平均分3份，平均分4份。
grid-template-columns:repeat(3, 1fr);
3等分。
grid-template-columns:1fr 2fr 3fr;
按比例分。
grid-template-columns: 1fr minmax(150px, 1fr);
grid-template-columns: 100px auto 100px;
2、row-gap/gap
3，grid-template-area
4，grid-auto-flow
橫着排列，還是豎着排列。
dense 稠密的。空間利用率更高。
5，對齊方式
寫在容器上的對齊屬性，justify-items(水平方向) 對齊所有items / align-items垂直方向對齊所有的items。
針對所有的items。
每一個項目在自己所在的網格里面，往左對齊，往右對齊。
place-items: center center; 組合align-items和justify-items
6，justify-content(水平方向) / align-content(垂直方向)
容器里面所有內容打包在一起，叫content。所有內容變成一坨的對齊方式。
7，grid-auto-columns / grid-auto-rows
設置多出來的項目。
二、項目屬性
1，grid-column-start/grid-column-end/grid-column
跟網格線有關了。指定Item放哪個位置
grid-column-start 跨域幾個span: grid-column-start: span 2
這兩行效果完全一樣。
grid-column-start: span 2;
grid-column-end: span 2;
2, grid-area
跟區域有關了.
template中定義好區域，在項目上使用。指定項目在哪個區域。針對網格的。b區域有三個。
grid-area可以為項目命名。通過命名引用 容器的grid-template-area屬性命名的網格項目。
grid-area是4個屬性的縮寫，注意順序。先是row-start,column-start然后是row-end,column-end。
3, justify-self/ align-self/ place-self
給自己定位，跟容器上的justify-items和align-items一模一樣，只針對自己
