栅格 Grid

通过基础的 12 分栏，迅速简便地创建布局。

基础布局

使用列创建基础网格布局。

通过 ".open-row" 和 ".open-col-*" 样式名自由地组合布局。

显示代码

<div class="open-container">
		<div class="open-row">
			<div class="open-col-12 grey-1"></div>
		</div>
		<div class="open-row">
			<div class="open-col-6 grey-1"></div>
			<div class="open-col-6 grey-2"></div>
		</div>
		<div class="open-row">
			<div class="open-col-4 grey-1"></div>
			<div class="open-col-4 grey-2"></div>
			<div class="open-col-4 grey-1"></div>
		</div>
		<div class="open-row">
			<div class="open-col-3 grey-1"></div>
			<div class="open-col-3 grey-2"></div>
			<div class="open-col-3 grey-1"></div>
			<div class="open-col-3 grey-2"></div>
		</div>
		<div class="open-row">
			<div class="open-col-2 grey-1"></div>
			<div class="open-col-2 grey-2"></div>
			<div class="open-col-2 grey-1"></div>
			<div class="open-col-2 grey-2"></div>
			<div class="open-col-2 grey-1"></div>
			<div class="open-col-2 grey-2"></div>
		</div>
	</div>

分栏间隔

支持列间距。

行提供 ".open-row-*" 样式来指定列之间的间距，其默认值为0。

• open-row-1：左右内边距8px
• open-row-2：左右内边距12px
• open-row-3：左右内边距16px
• open-row-4：左右内边距20px
• open-row-5：左右内边距24px

显示代码

<div class="open-container">
	// open-row-1
	<div class="open-row open-row-1">
		<div class="open-col-3"><div class="grey-1"></div></div>
		<div class="open-col-3"><div class="grey-2"></div></div>
		<div class="open-col-3"><div class="grey-1"></div></div>
		<div class="open-col-3"><div class="grey-2"></div></div>
	</div>
</div>

列偏移

您可以指定列偏移量。

通过"open-offset-*"样式可以指定分栏偏移的栏数。

显示代码

<div class="open-container">
	<div class="open-row open-row-1">
		<div class="open-col-3"><div class="grey-1"></div></div>
		<div class="open-col-3 open-offset-3"><div class="grey-1"></div></div>
	</div>
	<div class="open-row open-row-1">
		<div class="open-col-3 open-offset-3"><div class="grey-1"></div></div>
		<div class="open-col-3 open-offset-3"><div class="grey-1"></div></div>
	</div>
	<div class="open-row open-row-1">
		<div class="open-col-3 open-offset-6"><div class="grey-1"></div></div>
	</div>
</div>

响应式布局

参照了 Bootstrap 的 响应式设计，预设了六个响应尺寸：xs、sm、md、lg、xl 和 xxl。

显示代码

<div class="open-container">
	<div class="open-row open-row-1">
		<div class="open-xs-12 open-sm-6 open-md-3 open-lg-2 open-xl-2 open-xxl-1"><div class="grey-1"></div></div>
		<div class="open-xs-12 open-sm-6 open-md-3 open-lg-4 open-xl-4 open-xxl-5"><div class="grey-2"></div></div>
		<div class="open-xs-12 open-sm-6 open-md-3 open-lg-4 open-xl-4 open-xxl-5"><div class="grey-1"></div></div>
		<div class="open-xs-12 open-sm-6 open-md-3 open-lg-2 open-xl-2 open-xxl-1"><div class="grey-2"></div></div>
	</div>
</div>

公共样式类

禁止页面滑动：

".stop-scroll"样式类添加到body元素

添加元素边框：

".open-border" 样式类添加到元素

设置元素左右边距：

".open-px-*" 样式类添加到元素

样式名	左右边距
open-px-0	0px
open-px-1	4px
open-px-2	8px
open-px-3	12px
open-px-4	16px