# CSS-Grid

# 什么是Grid

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

# 属性

# grid-template-columns

设置列，也就是宽

//定义一列，每列 100px
grid-template-columns: 100px;

//定义两列，每列 100px
grid-template-columns: 100px 100px;

//定义两列，第一列 100px 第二列 200px
grid-template-columns: 100px 200px;


//定义两列，第一列 100px 第二列 自动填满
grid-template-columns: 100px auto;

# grid-template-row

设置行，也就是高

//定义一行，行高150px，其余行无高度
grid-template-rows: 150px;

//定义两行，第一行高150px，第二行高150px，其余行无高度
grid-template-rows: 150px 250px;

# grid-gap

设置行间距和列间距

grid-gap: 10px;

# grid-template-areas 属性

属性用于定义区域，一个区域由一个或者多个单元格组成，一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。 grid-area 属性指定项目放在哪一个区域

# 示例

.wrapper {
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: 300px;
  /* grid-template-columns: repeat(3, 200px); */
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  grid-template-rows: 100px 200px;
}

# Grid Issue

Gird布局在iOS10.2之前不支持

caniuse (opens new window)

# 参考资料

https://www.youtube.com/watch?v=7kVeCqQCxlk https://codepen.io/anon/pen/NMOqzO

← CSS Flex CSS 单位 →