CSS3之Grid网格布局

Grid布局是一个二维的布局方法，横纵两个方向同时存在。

属性（作用在父容器上）

• grid-template-columns：划分网格列数（单位可以是像素、百分比、自适应及fr比例单位）
  例：
  grid-template-columns:50px 50px;
  grid-template-columns:50% 50%;
  grid-template-columns:repeat(3,1fr); //分成均匀的3列

• grid-template-rows：划分网格行数（单位可以是像素、百分比、自适应及fr比例单位）
  -例：
  grid-template-rows:50px 50px;
  grid-template-rows:50% 50%;
  grid-template-rows:repeat(3,1fr); //分成均匀的3行

• grid-template-areas：给网格划分区域的

• grid-template： grid-template-rows、grid-template-columns和grid-template-areas的复合属性
  例：
  grid-template:
  ‘a1 a2 a3’ 1fr
  ‘a4 a5 a6’ 1fr
  /1fr 1fr 1fr; //等分成二行三列

• grid-column-gap：定义网格中列之间的空隙

• grid-row-gap：定义网格中行之间的空隙

• grid-gap：grid-column-gap和grid-row-gap的复合写法，行前列后

• justify-content：网格的横向排列方式

• align-content：网格的纵向排列方式

• place-content：justify-content和align-content的复合写法，纵向前横向后，空格隔开
  例：
  stretch //垂直或水平填充
  start //左侧或顶部对齐
  center //水平或垂直居中对齐
  end //右侧或底部对齐
  space-between //两端对齐
  space-around //享受独立不重叠空白空间
  space-evenly //平均分配空白空间

• justify-items：网格内元素的水平排列方式

• align-items：网格内元素的垂直排列方式

• place-items：justify-items和align-items的复合写法，纵向前横向后，空格隔开

• 例：
  stretch //垂直或水平拉伸
  start //左侧或顶部对齐
  center //水平或垂直居中对齐
  end //右侧或底部对齐

属性（作用在子项上）

• grid-column-start：水平方向占据的起始位置
• grid-column-end：水平方向占据的结束位置
• grid-column：grid-column-start和grid-column-end的复合写法
• grid-row-start：垂直方向占据的起始位置
• grid-row-end：垂直方向占据的结束位置
• grid-row：grid-row-start和grid-row-end的复合写法
• grid-area：表示当前网格所占区域，名字和位置两种表示方法
• justify-self：单个网格水平对齐方式
• align-self：单个网格垂直对齐方式
• place-self：justify-self和align-self的复合写法