Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

容器属性：

display 布局
grid-template-columns 列
grid-template-rows 行
grid-template-areas 区域
grid-template 行 列 区域简写

grid-column-gap 列间隔
grid-row-gap 行间隔
grid-gap 简写

justify-items 项目内容横向排列方式
align-items 项目内容纵向排列方式
place-items 简写

justify-content 内容横向排列方式
align-content 内容纵向排列方式
place-content 简写

grid-auto-columns 隐式（多出来未定义的格子）列宽
grid-auto-rows 隐式（多出来未定义的格子）行高

grid-auto-flow 排列方式

grid 行 列 区域 隐式格子宽 隐式格子高 排列方式简写

项目属性：

grid-column-start 定位列线开始位置
grid-column-end 定位列线结束位置
grid-column 简写

grid-row-start 定位行线开始位置
grid-row-end 定位行线结束位置
grid-row 简写

grid-area 区域

justify-self 单个项目内容横向对其方式
align-self 单个项目内容纵向对其方式
place-self 简写

网格容器(Grid Container) 属性

display

.box{
   display: grid;  /*生成一个块级网格*/
   display: inline-grid;  /*生成一个内联网格*/
}

设置行列 grid-template-columns | grid-template-rows

设置列宽、行高

可以是以下单位：

• px

• 百分比

• auto

• 空间（fr单位）

• repeat(3,100px) ==100px 100px 100px;

• repeat() 第一个参数是重复的次数，第二个参数重复的值

  .box{
      grid-template-columns: repeat(3, 50px);
      grid-template-rows: 50px 50px 50px 50px;
  }
  

• auto-fill 单元格大小是固定的，但是容器的大小不确定，这个属性就会自动填充

  .box{
      grid-template-columns: repeat(auto-fill, 50px);
  }
  

• fr 表示比例关系（fraction的缩写意为“片段”）

  .box{
      grid-template-columns: repeat(3, 1fr);
  }
  

• minmax() 两个参数，分别为最小值，最大值（容器没有固定宽度）

  .box{
      grid-template-columns: 1fr 1fr minmax(60px, 1fr)
  }
  

• auto 除设置的宽度，中间宽度占满容器的剩余宽度

  .box{
      grid-template-columns: 50px auto 50px;
  }
  

• 网格线，用方括号定义网格线名称，方便以后引用（3个单元格4条线）

  .box{
      grid-template-columns: [c1] 50px [c2] 50px [c3] 50px [c4];
  }
  

区域 grid-template-areas | grid-template

设置定义区域（在子项目中可以直接使用）

/*容器(下面这个是定义了3行3列布局)*/
.box{
    grid-template-areas: 'a a b'
                         'a a b'
                         'c c c';
}

/*项目*/
.box .item1{
    grid-area: a;/*a占了4个单元格*/
}

.box .item2{
    grid-area: b; /*b占了2个单元格*/
}

grid-template 是 grid-template-rows，grid-template-columns，grid-template-areas 简写属性

.box{
    display: grid;
    grid-template-rows: 35px 50px 30px;
    grid-template-columns: 100px 100px 100px;
    grid-template-areas:
        "a a a"
        "b c c"
        "d e f";
}
//下面写法等于上面的写法
.box {
    display: grid;
    grid-template: "a a a" 35px "b c c" 50px "d e f" 30px / 100px 100px 100px;
}

间隔 grid-column-gap | grid-row-gap | grid-gap

每个单元格之间的间隔

grid-column-gap == column-gap

grid-row-gap == row-gap

grid-gap == gap

.box{
    row-gap: 20px;
    column-gap: 20px;
}

/*简写*/
.box{
    gap: 10px 30px;   /*行 列*/
}

所有子元素对其方式 justify-items | align-items | place-items

设置所有子元素内容的对齐方式

• start 左侧对齐 | 顶部对齐
• >end 右侧对齐 | 底部对齐
• center 左右居中对齐 | 上下垂直对齐
• stretch 填满单元格的宽度（默认值）

水平方向

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

垂直方向

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

简写方式

.box{
    place-items: start end; /*垂直 水平*/
}

内容对其方式 justify-content | align-content | place-content

设置整个内容在容器内对齐方式

• start 左侧对齐 | 顶部对齐
• end 右侧对齐 | 底部对齐
• center 左右居中对齐 | 上下垂直对齐
• stretch 调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
• space-around 左右两端留空白，左右两端空白是中间的一半
• space-between 左右两端没有空间
• space-evenly 左右两端留空白，留的空白区域均匀

水平方向

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

垂直方向

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

简写方式

.box{
    place-content: end start; /*垂直 水平*/
}

多出来的项目宽高 grid-auto-columns | grid-auto-rows

设置多出来的项目宽和高（我们设置了3*3个项目，但是实际有10个，这个属性就是用来设置多出来的项目）

.box{
    grid-auto-columns: 50px 60px 80px;  /*多出来 1格 2格 3格*/
    grid-auto-rows: 50px;
}

子元素排列方式 grid-auto-flow

子元素的排列顺序，默认是先行后列（先填满第一行，在放入第二行）

• row 先行后列
• column 先列后行
• dense 填充网格，第二个单元格比较宽，放不下就会换行吧这个位置空出来，让能放下的填充

.box{
    grid-auto-flow: row | column | row dense | column dense
}

简写 grid

在一个声明中设置所有以下属性的简写：grid-template-rows,grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和grid-auto-flow。（注意：您只能在单个网格声明中指定显式或隐式网格属性）。

网格项(Grid Items) 属性

定位 grid-column-start | grid-column-end | grid-row-start | grid-row-end | grid-column | grid-row

用来指定item的具体位置，根据在那跟网格线

grid-column-start | grid-column-end 列从第几根线开始，第几根线结束

grid-row-start | grid-row-end 行从第几根线开始，第几根线结束

grid-column | grid-row 简写

.box .item:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 5;
}

/*简写*/
.box .item:nth-child(1) {
    grid-column: 2/4;
    grid-row: 3/5;
}

/*简写2*/
.box .item:nth-child(1) {
    /*行开始 列开始 行结束 列结束*/
    grid-area: 3/2/5/4;
}

表示跨几行或几列

.box .item:nth-child(1) {
    grid-column-start:span 2; /* ===> grid-column-end:span 2*/
    grid-row-start:span 2;/* ===> grid-row-end:span 2*/
}

区域 grid-area

父容器定义了区域，在项目中可以直接使用

/*容器(下面这个是定义了3行3列布局)*/
.box{
    grid-template-areas: 'a a b'
                         'a a b'
                         'c c c';
}

/*项目*/
.box .item1{
    grid-area: a;/*a占了4个单元格*/
}

.box .item2{
    grid-area: b; /*b占了2个单元格*/
}

子元素对其方式 justify-self | align-self | place-self

设置单个子元素内容的对齐方式（跟 justify-items 属性用法完全一致，justify-items 是设置所有的，justify-self 是设置单个的）

• start 左侧对齐 | 顶部对齐
• end 右侧对齐 | 底部对齐
• center 左右居中对齐 | 上下垂直对齐
• stretch 填满单元格的宽度（默认值）

水平方向

.box .item1{
    justify-self: start | end | center | stretch;
}

垂直方向

.box .item1{
    align-self: start | end | center | stretch;
}

简写方式

.box .item1{
    place-self: start end; /*垂直 水平*/
}