【20170220】CSS Grid布局
zhongxia245 opened this issue · comments
时间：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，这些术语实在是不知道怎么解释啊。下面的解释都是废话
1. 网格线（Grid lines）
想想Excel表格的边线。
2. 行（Rows）
想想Excel的一行
3. 列（Columns）
想想Excel的一列
4. 间距（Gutters）
想想单元格之间的间距
5. 单元格（Cells）
想想Excel一个单元格
6. 网格区域（Grid Area）
多个单元格，就是一个区域，叫做网格区域
三、如何使用
上面讲的术语纯属废话，就不啰嗦了，直接讲如何使用吧。
3.1 display:grid
display:flex; # 表示弹性布局
display:grid; # 表示网格布局3.2 grid-template-columns / grid-template-rows
# 1. 设置网格布局, 4列 ，2行
.container{
display:grid;
grid-template-columns:100px 100px 100px auto;
grid-template-rows: 100px 100px;
}
如果需要更多行，或者更多列，则在 grid-template-colums ，grid-template-rows 来设置更多行更多列即可。
.container{
display:grid;
grid-template-columns: auto 100px auto 100px;
grid-template-rows: auto auto;
}表示 4列，2行。
- 第二列和第四列宽度100px， 剩下的宽度，由第一列和第三列平分。
- 两行平分网格布局容器的高度。
3.3 grid-column / grid-row
表示该标签放在单元格的什么位置
/*表示设置该样式的标签，占网格布局中的 第一行第三列*/
.grid-item-1-3{
grid-row: 1;
grid-column: 3;
}如果不执行的话，默认是 从左往右，从上往下
| header1 | header 2 //忽略header |
|---|---|
| 1 | 2 |
| 3 | 4 |
3.4 grid-template-areas 【重要】
.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"
}3.5 grid-gap / grid-column-gap / grid-row-gap
网格之间的间距
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;
}
3.6 justify-items / align-items
这两个是网格容器的属性
-
justify-items 列轴的对齐方式
-
align-items 行轴的对齐方式
-
可选值
- start: 内容与网格区域的顶端对齐
- end: 内容与网格区域的底部对齐
- center: 内容处于网格区域的中间位置
- stretch: 内容高度占据整个网格区域空间(默认值)
3.7 justify-content
当你使用px这种非响应式的单位对你的网格项进行大小设置时，就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下，你就可以设置网格容器内网格的对齐方式。此属性会将网格沿列轴进行对齐(相反于align-content属性定义的沿行轴对齐)。
- 属性值:
- start: 网格与网格容器的左端对齐
- end: 网格与网格容器的右端对齐
- center: 网格处于网格容器的中间
- stretch: 调整网格项的大小，使其宽度填充整个网格容器
- space-around: 在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半
- space-between: 在网格项之间设置偶数个空格间隙，其最边缘不存在空格间隙
- space-evenly: 在网格项之间设置偶数个空格间隙，同样适用于最边缘区域
三、参考文章
这边文章，图文并茂，非常详细,可以去好好看下。