Home > Article > Web Front-end > Pure CSS grid layout (a css UI that is much smaller and easier to expand than bootstrap)_html/css_WEB-ITnose
Pure CSS grid layout (a css UI that is much smaller and easier to expand than bootstrap)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:581251browse
（转自百度经验）http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html
Pure是一个简单、实用的CSS框架，鉴于目前网上对pure的资料比较少，所以我想把使用pure的一些经验介绍给大家，相信你看完本文后也会爱上pure。
Pure包含多个模块：Base(基本样式)、Grids(网格系统)、Forms(表单)、Buttons(按钮)、Tables(表格)、Menus(菜单)，本文主要介绍如何使用Grids（网格系统）。
1.获取Pure CSS。
在官网purecss.io首页可以找到Pure的下载地址，你可以把Pure的css文件下载到本地，也可以直接引用雅虎的css文件。本文作为教程就直接使用在线的css文件。
2.了解pure网格系统。
不知道网格系统的朋友可以去百度，我这里简单说一下：所谓的网格系统就是把网页横向划分成N格，类似一个Excel表格，这样网页内容就能放在这些格格里面。
pure的网格系统支持5格和24格，主要有两种样式：pure-g和pure-u-*
1、pure-g，网格样式，例如b474cfb871b089ab6d805f3835b0a65e16b28748ea4df4d9c2150843fecfba68这样就实现了一个网格
2、pure-u-*，单元格样式，网格里的内容必须放在网格单元里。例如pure-u-1-2表示单元格占1/2的宽度、pure-u-2-3表示单元格占2/3的宽度，如下图所示
3.准备html页面。后面的教程都是使用该测试页面做演示，建议你基于这个html页面做练习。
<!DOCTYPE HTML><html><head> <!--引用pure--> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/grids-min.css"> <style type="text/css"> /*定义一些颜色，以便看到各模块的位置*/ .c1{background-color: #1abc9c;color:#FFF;} .c2{background-color: #2980b9;color:#FFF;} .c3{background-color: #8e44ad;color:#FFF;} .c4{background-color: #f39c12;color:#FFF;} .c5{background-color: #c0392b;color:#FFF;} .c6{background-color: #999999;color:#FFF;} .ph-500{min-height: 500px;}/*用于占位*/ .ph-50{min-height: 50px;}/*用于占位*/ .ph-100{min-height: 100px;}/*用于占位*/ .ph-200{min-height: 200px;}/*用于占位*/ .mg{margin: 3px;}/*增加边距*/ .main{max-width: 1000px;margin: 0 auto;}/*页面主体*/ </style></head><body> <div class="main"> </div></body></html> 4.从简单开始，实现左右结构
添加pure-g样式我们先从简单的入手，实现一个常见的左右结构，即左边内容+右侧边栏。先添加一个pure-g样式82b7433bc16ff14124cc322c1eeaa36516b28748ea4df4d9c2150843fecfba68
5.定义单元格。
我们要求侧边栏宽度是300px，由于前面定义了页面宽度是1000px，因此侧边栏占页面宽度的1/3。
82b7433bc16ff14124cc322c1eeaa365
09db061c307e6c5e6bc8181130ebd754
2920882627ee61bba118aea14d4a5ef2
aca1297e0889768a9ec42c1478868d66
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
0d83c7e4f4ecc4fbd9891937840a63a6
f9c87461f3cd3eacb8799841a991f81c
8ff1f95ebcad72642c7e3633f014b63d
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
6.给内容增加边距。
为了页面更美观，需要给左右两侧的内容增加间距。这里需要注意的是，设置margin、padding的样式不能跟pure-u-*的样式同时应用在同一个标签里，否则pure的网格系统会出现异常。
82b7433bc16ff14124cc322c1eeaa365
09db061c307e6c5e6bc8181130ebd754
613a2492afc5a864b31b01f6cd4e9377
aca1297e0889768a9ec42c1478868d66
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
0d83c7e4f4ecc4fbd9891937840a63a6
2d4ffc181b026696fc741327cf2b28f1
8ff1f95ebcad72642c7e3633f014b63d
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
7.嵌套使用网格，构造复杂布局
一个复杂布局。
显示应用中，布局当然不会只有左右两栏这么简单。接下来我们就以百度经验首页的一个栏目为例子做一个复杂的布局。下图就是我们要实现的效果
8.分析页面
任何复杂的布局都可以拆分为若干个简单的布局，可以分析出这个界面有4大区域，如图所示：
9.实现大体布局
现在我们先来实现上一个步骤里标出的4个模块，实现代码如下。可以看出就算是复杂的布局，用pure实现起来也是清晰明了，修改起来也很简单。比如区域4想改成一行显示5张图片，只需要把pure-u-1-4改成pure-u-1-5。至于区域1和区域2里的内容页可以继续嵌套网格来排版，这个留给读者做练习，我这里就不细说了。
82b7433bc16ff14124cc322c1eeaa365
09db061c307e6c5e6bc8181130ebd754
8f1e54f116ff634250754b6cd19eb9aa
aca1297e0889768a9ec42c1478868d66
b474cfb871b089ab6d805f3835b0a65e
fe2cb4ff71406064cf40535f9465989b
65b95cff4e7b9f78deedf936c92a23ca区域116b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
fe2cb4ff71406064cf40535f9465989b
08753089291fb617ddae868ff9a90eff区域216b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
7896d16a19424f787681985702cbfc15
eb544a388c98b68ef87562cae2e39701区域316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
9376532db71a8615aa30a1247f7e13d1
5be050b1cb2651740558402fe8eaaa17区域416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
9376532db71a8615aa30a1247f7e13d1
5be050b1cb2651740558402fe8eaaa17区域416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
9376532db71a8615aa30a1247f7e13d1
5be050b1cb2651740558402fe8eaaa17区域416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
9376532db71a8615aa30a1247f7e13d1
5be050b1cb2651740558402fe8eaaa17区域416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
;!--Sidebar-->
Also share a Chinese translated pure website http://pure-site.ap01.aws.af.cm/
It’s just version 0.3.0, now 0.6.0 ( 2015/5/4), this is the css UI smaller than bootstrap, only 6kb after compression