【20170220】CSS Grid布局

时间：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: 在网格项之间设置偶数个空格间隙，同样适用于最边缘区域

三、参考文章

这边文章，图文并茂，非常详细,可以去好好看下。

CSS Grid布局指南

zhongxia245 / blog

【20170220】CSS Grid布局 #77