用 grid 构建 CSS 布局系统（2）

2019-02-15 本文已影响30人 zidea

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;
}

用 grid 构建 CSS 布局系统（2）

猜你喜欢

热点阅读