Grid布局

容器属性

div {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;

  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;

  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
  grid-template-columns: repeat(2, 100px 20px 80px);

  grid-template-columns: repeat(auto-fill, 100px); /*自动填充指定宽度的项目*/

  grid-template-columns: 1fr 1fr;
  grid-template-columns: 150px 1fr 2fr;

  grid-template-columns: 1fr 1fr minmax(100px, 1fr); /*最小值 100px  最大值 1fr*/

  grid-template-columns: 100px auto 100px;

  grid-row-gap: 20px; /*行间距*/
  grid-column-gap: 20px; /*列间距*/
  grid-gap: 20px 20px;

  grid-auto-flow: column; /*排列方向，默认 row */
  grid-auto-flow: row dense; /*先行后列，并且尽可能紧密填满，尽量不出现空格 可选值：column dense*/

  justify-items: start | end | center | stretch; /*设置单元格内容的水平位置  stretch - 拉伸(默认值) */
  align-items: start | end | center | stretch;
  place-items: start end; /*justify-items 和 align-items 的简写*/

  justify-content: start | end | center | stretch | space-around | space-between | space-evenly; /*整个内容区域(各个项目集合在一起)在容器里面的水平位置*/
  align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
  /**
  * stretch - 项目大小没有指定时，拉伸占据整个网格容器。
  * space-around - 每个项目两侧的间隔相等。
  * space-between - 项目与项目的间隔相等。
  * space-evenly - 项目与项目的间隔相等，与容器的间隔也相等。
  */
  place-content: space-around space-evenly;

  grid-auto-columns: 50px;
  grid-auto-rows: 50px; /*浏览器自动创建的多余网格的列宽和行高, 它们的写法与grid-template-columns和grid-template-rows完全相同*/
}

容器属性

div {
  grid-column-start: 2; /*指定项目的四个边框，分别定位在哪根网格线*/
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column: 1 / 3;
  grid-row: 1 / 2;

  justify-self: start | end | center | stretch; /*设置单元格内容的水平位置*/
  align-self: start | end | center | stretch;
  place-self: center center;
}