We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
时间：2017-02-21 17:48:22 作者：zhongxia
下面很多知识点，这里先扔一个实例，让大家看看 网格布局有多爽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .header{ grid-area: header; height: 50px; background: pink; } .main{ grid-area: main; background: yellow; } .sidebar{ grid-area: sidebar; background: red; } .footer{ grid-area: footer; background: pink; } .container{ height: 500px; border: 1px solid black; display: grid; grid-template-columns: 200px 10px auto auto; grid-template-rows: 50px auto 50px; grid-template-areas: "header header header header" "sidebar . main main" "footer footer footer footer" } </style> </head> <body> <section class="container"> <div class="header"> </div> <div class="sidebar"> </div> <div class="main"> </div> <div class="footer"> </div> </section> </body> </html>
效果自己跑起来看看， 就是一个圣杯布局。
---------头部------------
-导航栏 |---- 主体部分---
---------底部-----------
CSS Grid布局（网格布局），能够很好的解决前端布局的问题。 让广大前端人员快速完成设计师的布局。
但是 CSS Grid布局，目前浏览器的支持还很弱。 弱到没法用了。
需要单独打开CSS Grid 布局功能。
# 开启这个功能[我们才能在Chrome浏览器上玩起来，chrome56了还不支持] chrome://flags/#enable-experimental-web-platformfeatures
看了下面的解释，发现只要你用过Excel，这些术语实在是不知道怎么解释啊。下面的解释都是废话
想想Excel表格的边线。
想想Excel的一行
想想Excel的一列
想想单元格之间的间距
想想Excel一个单元格
多个单元格，就是一个区域，叫做网格区域
上面讲的术语纯属废话，就不啰嗦了，直接讲如何使用吧。
display:flex; # 表示弹性布局 display:grid; # 表示网格布局
# 1. 设置网格布局, 4列 ，2行 .container{ display:grid; grid-template-columns:100px 100px 100px auto; grid-template-rows: 100px 100px; }
如果需要更多行，或者更多列，则在 grid-template-colums ，grid-template-rows 来设置更多行更多列即可。
grid-template-colums
grid-template-rows
.container{ display:grid; grid-template-columns: auto 100px auto 100px; grid-template-rows: auto auto; }
表示 4列，2行。
表示该标签放在单元格的什么位置
/*表示设置该样式的标签，占网格布局中的 第一行第三列*/ .grid-item-1-3{ grid-row: 1; grid-column: 3; }
如果不执行的话，默认是 从左往右，从上往下
.item-a{ grid-area: header; } .item-b{ grid-area: main; } .item-c{ grid-area: sidebar; } .item-d{ grid-area: footer; } .container{ grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer" }
网格之间的间距
grid-column-gap 和 grid-row-gap 可以简写成 grid-gap
.container{ grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-gap: 10px 15px; }
这两个是网格容器的属性
justify-items 列轴的对齐方式
align-items 行轴的对齐方式
可选值
当你使用px这种非响应式的单位对你的网格项进行大小设置时，就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下，你就可以设置网格容器内网格的对齐方式。此属性会将网格沿列轴进行对齐(相反于align-content属性定义的沿行轴对齐)。
这边文章，图文并茂，非常详细,可以去好好看下。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
零、实例
效果自己跑起来看看， 就是一个圣杯布局。
---------头部------------
-导航栏 |---- 主体部分---
---------底部-----------
一、前言
CSS Grid布局（网格布局），能够很好的解决前端布局的问题。 让广大前端人员快速完成设计师的布局。
但是 CSS Grid布局，目前浏览器的支持还很弱。 弱到没法用了。
需要单独打开CSS Grid 布局功能。
二、专业术语
1. 网格线（Grid lines）
想想Excel表格的边线。
2. 行（Rows）
想想Excel的一行
3. 列（Columns）
想想Excel的一列
4. 间距（Gutters）
想想单元格之间的间距
5. 单元格（Cells）
想想Excel一个单元格
6. 网格区域（Grid Area）
多个单元格，就是一个区域，叫做网格区域
三、如何使用
上面讲的术语纯属废话，就不啰嗦了，直接讲如何使用吧。
3.1 display:grid
3.2 grid-template-columns / grid-template-rows
如果需要更多行，或者更多列，则在
grid-template-colums，grid-template-rows来设置更多行更多列即可。.container{ display:grid; grid-template-columns: auto 100px auto 100px; grid-template-rows: auto auto; }表示 4列，2行。
3.3 grid-column / grid-row
表示该标签放在单元格的什么位置
如果不执行的话，默认是 从左往右，从上往下
3.4 grid-template-areas 【重要】
3.5 grid-gap / grid-column-gap / grid-row-gap
网格之间的间距
3.6 justify-items / align-items
这两个是网格容器的属性
justify-items 列轴的对齐方式
align-items 行轴的对齐方式
可选值
3.7 justify-content
三、参考文章
The text was updated successfully, but these errors were encountered: