CSS Grid布局

前言

Grid布局是最新的CSS布局，支持以下浏览器。

Browser.png

语法

父级引入display: grid;
设置布局格式，横竖多少格，每个格子宽度多少。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

子元素可以使用以下设置：

1. grid-column-start/end设置一行中某个格子或两者一起用，设置多个格子.
   注意end不一定比start大

#water{
  grid-column-start: 5;
  grid-column-end: 2;
}

或者：
#water{
  grid-column-start: 2;
  grid-column-end: span 2;
}

#water{
  grid-column: 2/span 2;
}

effect1.png

2. grid-area:

row-start / column-start / row-end / column-end