Pure.CSS 网格

Pure Grid 是 Pure.CSS 的一个概念。 Pure Grid 中有两种类型的类。

• pure-g: 一个网格类
• pure-u-*: 单元类

请参阅以下规则以使用纯网格

• 单元的宽度以分数表示。 例如，pure-u-1-2 代表 1/2 或 50% 的宽度，pure-u-2-5 代表 2/5 或 40% 的宽度，依此类推。
• 纯网格的子元素（具有 pure-g 类的元素）必须使用 pure-u 或 pure-u-* 类名。
• 所有内容都应成为网格单元的一部分才能正确呈现。

网格单元大小

• 5^th 单元格大小
• 24^th 单元格大小

让我们举个例子来说明可以附加到 pure-ui- 和 pure-g 的一些可用单元。

例如： 如果您想创建一个宽度为 50% 的单元格，您可以使用 CSS 样式 pure-ui-1-2。

基于 5 的单元

示例

输出

它将自行调整以适应任何屏幕尺寸。

例如

基于 24 的单元

它与基于 5 的单元相同，但基于 24 的单元的类名为 pure-u-x-24，其中 x 可以是 1 到 24 之间的任何数字（包括 1 和 24）。

示例

输出