- 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;
}
网友评论