文章目录
- 最近准备把自己博客主题的Boostrap的那一套给替换掉了！关键是由于自带的布局在Ipad上面会出现严重的变形！干扰正常的阅读！自己在布局方面想的So easy了！刚开始以为是哪一个代码没敲给弄错乱码了，后续不断试错才发现是CSS布局的问题！后来不断在互联网遨游发现了 CSS Grid布局这东西，感觉以后布局有的解了！一个字叫：爽！
- 我这里说一个响应式布局完整示例，其它具体详情就没必要了！可以去看参考！
- 我们需要的第一件事是一点 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>
- 那么我们需要在 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 属性即可。 语法可能有点奇怪，因为它不像其他的 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 属性： .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>
- CSS 页面布局常用的五种方式及其优缺点 - 前端随笔 CSS Grid 网格布局教程 | 阮一峰 https://www.freecodecamp.org/news/how-to-prototype-websites-quickly-with-css-grid-ffc9cba08583/ https://www.html.cn/archives/8512
最近准备把自己博客主题的Boostrap的那一套给替换掉了！关键是由于自带的布局在Ipad上面会出现严重的变形！干扰正常的阅读！自己在布局方面想的So easy了！刚开始以为是哪一个代码没敲给弄错乱码了，后续不断试错才发现是CSS布局的问题！后来不断在互联网遨游发现了 CSS Grid布局这东西，感觉以后布局有的解了！一个字叫：爽！
最近准备把自己博客主题的Boostrap的那一套给替换掉了！关键是由于自带的布局在Ipad上面会出现严重的变形！干扰正常的阅读！自己在布局方面想的So easy了！刚开始以为是哪一个代码没敲给弄错乱码了，后续不断试错才发现是CSS布局的问题！后来不断在互联网遨游发现了 CSS Grid布局这东西，感觉以后布局有的解了！一个字叫：爽！
我这里说一个响应式布局完整示例，其它具体详情就没必要了！可以去看参考！
我这里说一个响应式布局完整示例，其它具体详情就没必要了！可以去看参考！
我们需要的第一件事是一点 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>
那么我们需要在 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 属性即可。 语法可能有点奇怪，因为它不像其他的 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 属性：
.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测试该用例！注意可能会被人改变！
可跳转到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>
