设为网格布局以后，容器子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置都将失效

指定一个三行三列的网格，列宽为百分比行高为像素

.container {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 100px 100px 100px;
}

使用 repeat 函数指定一个六行三列的网格

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(2, 100px 50px 100px);
}

使用 auto-fill 实现自动填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

使用 fr 实现等分或倍等分

.container {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
}

给网格线命名，方便以后引用

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1 first-line] 100px [r2] 100px [r3] auto [r4];
}

设置行列间距

.container {
  grid-row-gap: 20px;
  grid-column-gap: 10px;
  /* 或者合写 */
  grid-gap: 20px 10px;
}

指定 area，方便以后引用，用不到的区域用 . 代替

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a . c' 'd e f' 'g h i';
}

设置网格的排列顺序

.container {
  display: grid;
  grid-auto-flow: row | column | row-dense | column-dense
}

设置单元格内容的水平、垂直位置

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  /* 或者合写 */
  place-items: <align-items> <justify-items>;
}

设置整个内容区域在容器里面的水平、垂直位置

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  /* 或者合写 */
  place-content: <align-content> <justify-content>
}

设置浏览器自动创建的多余网格的列宽和行高

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

grid-template 属性，grid 属性

grid-template：grid-template-columns、grid-template-rows、grid-template-areas 的合写

grid：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 的合写

根据第几条网格线或网格线名称指定项目的位置

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: footer-end;
}
/* 或者合写 */
.item {
  grid-column: 1 / 3;
  grid-row: 2 / footer-end;
}

利用 span 设置跨越两个网格

.item {
  grid-column-start: span 2;
  /* 等同于 */
  grid-column-end: span 2;
}

根据 上文的 area 指定项目的位置

.item {
  grid-area: e;
  /* 或者 */
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>
}

设置单元格内容的水平、垂直位置，跟 justify-items 属性的用法一致，但只作用于单个项目

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  /* 或者合写 */
  place-self: <align-self> <justify-self>;
}