缘由
最近准备把自己博客主题的Boostrap的那一套给替换掉了！关键是由于自带的布局在Ipad上面会出现严重的变形！干扰正常的阅读！自己在布局方面想的So easy了！刚开始以为是哪一个代码没敲给弄错乱码了，后续不断试错才发现是CSS布局的问题！后来不断在互联网遨游发现了 CSS Grid布局这东西，感觉以后布局有的解了！一个字叫：爽！
简介
我这里说一个响应式布局完整示例，其它具体详情就没必要了！可以去看参考！
html
我们需要的第一件事是一点 HTML 。 一个网格容器（将变成一个网格元素）和网格项（header, menu, content, footer）。
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
css
那么我们需要在 container 元素设置 display: grid; ，将其设置为网格容器，并指定我们需要多少行和列。这是基本的CSS：
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-gap: 5px;
}
以上代码的意思是：使用 grid-template-columns 属性创建一个 12 列的网格，每个列都是一个单位宽度（总宽度的 1/12 ）。（注：其中， repeat(12, 1fr) 意思是 12 个重复的 1fr 值。 fr 是网格容器剩余空间的等分单位。）使用 grid-template-rows 属性创建 3 行，第一行高度是 50px ，第二行高度是 350px 和第三行高度是 50px。最后，使用 grid-gap 属性在网格中的网格项之间添加一个间隙。
添加 grid-template-areas
这个属性被称为网格区域，也叫模板区域，能够让我们轻松地进行布局实验。
要将它添加到网格中，我们只需给网格容器加一个 grid-template-areas 属性即可。 语法可能有点奇怪，因为它不像其他的 CSS 语法。例如：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-template-areas:
"h h h h h h h h h h h h"
"m m c c c c c c c c c c"
"f f f f f f f f f f f f";
}
grid-template-areas 属性背后的逻辑是你在代码中创建的网格可视化表示。正如你所看到的，它有 3 行 12 列，和我们在 grid-template-columns 和 grid-template-rows 中定义的正好呼应。
每行代表一行，用网格术语来说是 网格轨道(Grid Track) ，每个字符（ h，m，c，f）代表一个网格单元格。注：其实是 网格区域(Grid Area) 名称，你可以使用任意名称。
四个字母中的每一个现在都形成一个矩形 grid-area 。
你可能已经猜到，我选择了字符 h，m，c，f，是因为他们是 header, menu, content 和 footer 的首字母。 当然，我可以把它们叫做任何想要的名称，但是使用他们所描述的东西的第一个字符更加容易让人理解。
- 以下就是完整布局
给网格项设定网格区域名称（ grid-area）
现在我们需要将这些字符与网格中的网格项建立对应的连接。 要做到这一点，我们将在网格项使用 grid-area 属性：
.header {
grid-area: h;
}
.menu {
grid-area: m;
}
.content {
grid-area: c;
}
.footer {
grid-area: f;
}
尝试其他布局
现在，我们开始讨论 Grid(网格) 布局 特性的精妙之处，因为我们可以很容易地对布局进行修改尝试。只需修改 grid-template-areas 属性的字符即可。举个例子，把 menu 移到右边：
grid-template-areas:
"h h h h h h h h h h h h"
"c c c c c c c c c c m m"
"f f f f f f f f f f f f";
- 修改后的效果
- 我们可以使用点 . 来创建空白的网格单元格。
grid-template-areas:
". h h h h h h h h h h ."
"c c c c c c c c c c m m"
". f f f f f f f f f f .";
响应式布局完整示例
可跳转到http://js.jirengu.com/wizajadegu/1/edit?html,css,output测试该用例！注意可能会被人改变！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-template-areas:
"h h h h h h h h h h h h"
"c c c c c c c c c c m m"
"f f f f f f f f f f f f";
}
.header {
grid-area: h;
color:red;
background-color:green;
}
.menu {
grid-area: m;
color:orange;
background-color:lightgreen;
}
.content {
grid-area: c;
color:blue;
background-color:orange;
}
.footer {
grid-area: f;
color:red;
background-color:blue;
}
@media screen and (max-width: 640px) {
.container {
grid-template-areas:
"h h h h h h h h h h h h"
"c c c c c c c c c c c c"
"m m m m m m m m m m m m"
"f f f f f f f f f f f f";
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
浏览器兼容（未测试过）
Leave a Reply