前言
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%;
}
子元素可以使用以下设置：
- 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
- grid-area:
row-start / column-start / row-end / column-end
网友评论