用 grid 构建 CSS 布局系统（2）
- 2011 四月 grid 的草案第一次亮相
- Microsoft 给出 grid 方案
- 最早是在 IE10 上实现了 grid
- 规范还在不断改进，现在规范和 IE10 上的实现有很大差异
- 2014 八月 29 完成最后编辑的草案
- 现在已经在 chrome 等浏览器上实现
我们先定义一个 html 结构便于我们观察效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> </body></html>.wrapper{ display: grid;}现在为 wrapper 设置显示类型为 grid，这样才能启动我们 grid 系统。
.wrapper{ display: grid; grid-template-columns: 200px 40px auto 40px 200px; grid-template-rows: auto;}grid 系统中通过定义 200px 40px auto 40px 200px 来将页面划分 5 区域，这 5 区域 会生产 6 条线。
这里 auto 会自适应占据剩余的空间，所以我们根据线来定义我们空间，具体可以参见这个图，这个图和可以清晰帮助您了解 grid 是如何划分区域。
018.PNG
.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];}而后我们即可以为每块指定的返回，注意 grid-column-start 设置的第 1 条线开始到 grid-column-end 的指定的第 6 线结束。所以我们开始编码时可以现在纸上画好草图，而后根据草图进行 coding。
.nav{ grid-column-start:1; grid-column-end:6; grid-row-start: 1; grid-row-end: 2;}.side{ grid-column-start:1; grid-column-end:2; grid-row-start: 2; grid-row-end: 3;}.content{ grid-column-start:3; grid-column-end:4; grid-row-start: 2; grid-row-end: 3;}.feature{ grid-column-start:5; grid-column-end:6; grid-row-start: 2; grid-row-end: 3;}这样写似乎是一个体力活，grid 提供一个简便的写法， grid-column-start:1;grid-column-end:2; 这两句合并成一句 grid-column: 1 / 6; 是不是减少很多工作量。
.wrapper{ display: grid; grid-template-columns: 200px 40px auto 40px 200px; grid-template-rows: auto;}.nav{ grid-column: 1 / 6; grid-row: 1 / 2;}.side{ grid-column:1 / 2; grid-row: 2 / 3;}.content{ grid-column:3 / 4; grid-row: 2 / 3;}.feature{ grid-column:5 / 6; grid-row: 2 / 3;}上面通过分隔线来划分区域，我们也可以通过定义区域来划分区域，在多人协作开发情况这种似乎很方便，我们通过 grid-area 为每一个块定义好一个区域名称，而后即可以拿这些区域名称进行划分了
.nav{ grid-area: nav;}.side{ grid-area: side;}.content{ grid-area: main;}.feature{ grid-area:feature;}这里我们可以通过（.） 来用作占位符号，而后对应想要放置我们事前设置好的区域时候，即可以把区域名称放置在想要放置位置即可以了。
.wrapper{ display: grid; grid-template-columns: 200px 40px auto 40px 200px; grid-template-rows: auto; grid-template-areas: ". . nav . ." " side . main . feature"}.nav{ grid-area: nav;}.side{ grid-area: side;}.content{ grid-area: main;}.feature{ grid-area:feature;}说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用 grid 构建 CSS 布局系统（2）
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用 grid 构建 CSS 布局系统（2）
