grid布局

Grid布局（网格布局），是一个二维系统，这就意味着它同时可以处理行和列。可以通过css规则应用于父元素和子元素，来实现网格布局。

兼容性

image.png

从图中我们可以看到，就目前来说，grid布局的支持还是较差的，IE只在11支持，chrome在57开始支持，iphone手机端10.3才开始支持，Safari 11支持。虽然就目前而言，有部分不支持grid布局，但是也可以看出，就移动端而言，目前大部分年轻人目前使用的手机和主流手机都是支持，所以在生产环境中使用grid布局只是时间问题。

Grid 属性列表

Grid Container 的全部属性

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Grid Items 的全部属性

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

父容器(Grid Container)的属性

首先在父元素上设置display：grid；这样里面所有的子元素都要遵循grid的布局规则，看下面的例子

  
One
  
Two
  
Three
  
Four
  
Five
  
Six

image.png

我们很容易通过css来知道页面长什么样子
grid-template-columns:200px 100px 200px;设置了列,每一列的宽带分别向对应，第一列200px，第二列100px；第三列200px；
同理，行也是一样，grid-template-rows设置了第一行高是100px，第二行高200px，这样就组成上面的样子，感觉是不是和table表格一样？

grid-template-columns / grid-template-rows

使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

(如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

但你可以给网格线指定确切的命名。 注意中括号里的网格线命名语法：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

需要注意的是，一个网格线可以有不止一个名字。例如，这里第2条网格线有两个名字：row1-end 和 row2-start：

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定义中包含重复的部分，则可以使用repeat() 符号来简化写法：

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

上面的写法和下面等价：

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

fr 单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 grid item 为 grid container 宽度的三分之一：

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

自由空间是在排除所有不可伸缩的 grid item 之后计算得到的。 在下面的示例中，fr单位可用的自由空间总量不包括50px:

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

grid-template-areas

通过引用 grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。

值：

• - 使用 grid-area 属性设置的网格区域的名称
• . - 点号代表一个空网格单元
• none - 没有定义网格区域

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display:grid;
  grid-template-columns: 100px 40px 40px 120px;/*列宽*/
  grid-template-rows: 100px 60px 30px; /*行高*/
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
  grid-gap:10px 10px;  
}

image.png

这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行是footer区域组成。

grid-column-gap / grid-row-gap

指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。
值：

• line-size - 一个长度值

.container {
  grid-column-gap: ;
  grid-row-gap: ;
}

只能在列/行之间创建缝隙，而不是在外部边缘创建。

align-items

沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。

值：

• start: 内容与网格区域的顶端对齐
• end: 内容与网格区域的底部对齐
• center: 内容位于网格区域的垂直中心位置
• stretch: 内容高度占据整个网格区域空间(这是默认值)

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

也可以通过给单个 grid item 设置align-self属性来达到上述效果。

.item-a {
  grid-area: header;
  background: #ccc;
  align-self: center;
}

image.png

justify-content

有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。

值：

• start - 网格与网格容器的左边对齐
• end - 网格与网格容器的右边对齐
• center - 网格与网格容器的中间对齐
• stretch - 调整g rid item 的大小，让宽度填充整个网格容器
• space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
• space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
• space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘

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

举例：

.container {
  justify-content:center;  
}

/*等同于margin:0 auto;
  实现水平居中
*/

image.png

本文摘自饥人谷若愚老师,grid布局一文,侵权即删.

附几个demo
demo1
demo2