Pure.CSS网格布局使用示例

本文概述

网格单元尺寸
基于第五单元
基于24单元

Pure Grid是Pure.CSS的概念。纯网格中有两种类型的类。

pure-g：网格类
pure-u- *：单元类

【Pure.CSS网格布局使用示例】请参阅以下规则以使用纯网格：

单位宽度以分数为单位。例如, 纯u-1-2表示宽度为1/2或50％, 纯u-2-5表示宽度为2/5或40％, 依此类推。
Pure Grid的子级(具有pure-g类的元素)必须使用pure-u或pure-u- *类名。
所有内容都应成为网格单元的一部分, 以正确呈现。

网格单元尺寸

第五单元尺寸
第24个单位的尺寸

让我们以一个示例来展示一些可以附加到pure-ui-和pure-g的可用单元。
例如：如果要创建宽度为50％的单元格, 则可以使用CSS样式pure-ui-1-2。
基于第五单元例子

< html> < head> < title> The PURE.CSS Grid< /title> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> < 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: lightgreen; } < /style> < /head> < body> < div class="grids-example"> < div class="grid-unitpure-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-unitpure-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-unitpure-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>

立即测试
输出

文章图片

文章图片
它将在任何屏幕尺寸上进行自我调整。
例如：

文章图片
基于24单元它与第5个单位相同, 但第24个单位的类名称为pure-u-x-24, 其中x可以是1到24之间的任何数字。
例子

< html> < head> < title> The PURE.CSS Grid< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> < 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: yellow; } < /style> < /head> < body> < div class = "grids-example"> < div class = "grid-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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-unitpure-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>

立即测试
输出