Pure.CSS网格
2018-12-22 10:29 更新
PURE.CSS提供pure网格概念有两种类型，pure-g，网格类和单元类，pure-u- *。以下是使用纯网格的规则。
单位宽度是分数。例如，纯的pure-u-1-2表示1/2或50％的宽度，pure-u-2-5表示2/5或40％的宽度等等。
pure网格的子元素（具有pure-g类的元素）必须使用pure-u或者pure-u-*类名。
所有内容应该是要正确呈现网格单元的一部分。
网格单元尺寸
pure网格配备了第五和第24单元两个尺寸。下面的图示示出了其中一些可以被附加到pure-ui-可用单位的例子。例如，创造50％的宽度的单元格，则可以使用一个CSS样式pure-ui-1-2。
基于5s的单位
purecss_5th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">2-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-2-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">3-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-3-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">4-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-4-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
</div>
</body>
</html>
1-52-53-54-511-1
1-5
2-5
3-5
4-5
1
1-1
基于24ths单位
purecss_24th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-12</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-12"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">2-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-2-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">3-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-3-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-8</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-8"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">4-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-4-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-6</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-6"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">5-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-5-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-4</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-4"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">6-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-6-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">7-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-7-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-3</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-3"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">22-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-22-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">23-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-23-24"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">24-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-24-24"></div>
</div>
</div>
</div>
</div>
</body>
</html>
以上内容是否对您有帮助：
更多建议：