栅格化布局

栅格化布局是一种基于网格系统的布局方式，采用 CSS 原生 grid 布局封装，提供了简单易用的栅格系统。适配不同屏幕尺寸，提供了响应式布局。预设了 12 列栅格系统，可根据需要自定义列数。

示例

贴士：以下示例中的 背景色 仅仅只是为了让布局效果显得更加直观，实际使用时并不需要背景色。

自适应容器

一个带有 class="bny-container" 的特定容器中，实现响应可控的布局。

.bny-container

Code

/* 超小屏幕（768px 以下） */
@media screen and (max-width: 767.98px){...}
/* 中等屏幕（768px 及以上） */
@media screen and (min-width: 768px) {...}
/* 大屏幕（992px 及以上） */
@media screen and (min-width: 992px) {...}
/* 超大屏幕（1200px 及以上） */
@media screen and (min-width: 1200px) {...}
/* 超超大屏幕（1400px 及以上） */
@media screen and (min-width: 1400px) {...}

网格布局

一个带有 class="bny-row" 的特定容器中，实现等比例水平排列的布局。

基础

始终等比例水平排列:

Preview
Code

6/12

3/12

<div class="bny-row" gap>
    <div class="col-xs6">
        6/12
    </div>
    <div class="col-xs6">
        6/12
    </div>
    <div class="col-xs3">
        3/12
    </div>
    <div class="col-xs3">
        3/12
    </div>
    <div class="col-xs3">
        3/12
    </div>
    <div class="col-xs3">
        3/12
    </div>
</div>

移动设备、桌面端的组合响应式展现：

Preview
Code

xs:12, md: 8/12

xs:6/12, md: 4/12

xs:6/12, md: 12

<div class="bny-row" gap>
    <div class="col-xs12 col-md8">
        xs:12, md: 8/12
    </div>
    <div class="col-xs6 col-md4">
        xs:6/12, md: 4/12
    </div>
    <div class="col-xs6 col-md12">
        xs:6/12, md: 12
    </div>
</div>

移动设备、平板、桌面端的复杂组合响应式展现：

Preview
Code

xs6, sm: 6/12, md: 4/12

xs:6/12, sm: 6/12, md: 4/12

xs:4/12, sm: 12/12, md: 4/12

xs:4/12, sm: 7/12, md: 8/12

xs:4/12, sm: 5/12, md: 4/12

<div class="bny-row" gap>
    <div class="col-xs6 col-sm6 col-md4">
        xs6, sm: 6/12, md: 4/12
    </div>
    <div class="col-xs6 col-sm6 col-md4">
        xs:6/12, sm: 6/12, md: 4/12
    </div>
    <div class="col-xs4 col-sm12 col-md4">
        xs:4/12, sm: 12/12, md: 4/12
    </div>
    <div class="col-xs4 col-sm7 col-md8">
        xs:4/12, sm: 7/12, md: 8/12
    </div>
    <div class="col-xs4 col-sm5 col-md4">
        xs:4/12, sm: 5/12, md: 4/12
    </div>
</div>

无间隔布局, 不添加 gap 属性即可:

Preview
Code

4/12

<div class="bny-row">
    <div class="col-xs4">
        4/12
    </div>
    <div class="col-xs4">
        4/12
    </div>
    <div class="col-xs4">
        4/12
    </div>
    <div class="col-xs4">
        4/12
    </div>
</div>

列偏移(偏移时要注意不要超出网格范围，而且计算自身占用格子数。):

Preview
Code

1/12

4/12

4/12 偏移到第12个格子

3/12 偏移到第6个格子

3/12 不偏移

<div class="bny-row" gap>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <div class="col-1 demo-box">
        1/12
    </div>
    <!-- 偏移 -->
    <div class="col-4 demo-box">
        4/12
    </div>
    <div class="col-4 col-offset12 demo-box">
        4/12 偏移到第12个格子
    </div>
    <div class="col-3 col-offset6 demo-box">
        3/12 偏移到第6个格子
    </div>
    <div class="col-3 demo-box">
        3/12 不偏移
    </div>
</div>

栅格嵌套:

Preview
Code

内部列

<div class="bny-row" gap>
    <div class="col-xs6" >
        <div class="bny-row" gap>
            <div class="col-xs3">
                内部列
            </div>
            <div class="col-xs9">
                内部列
            </div>
            <div class="col-xs12">
                内部列
            </div>
        </div>
    </div>
    <div class="col-xs6" >
        <div class="bny-row" gap>
            <div class="col-xs12">
                内部列
            </div>
            <div class="col-xs3">
                内部列
            </div>
            <div class="col-xs9">
                内部列
            </div>
        </div>
    </div>
</div>

栅格布局规则

规则	说明
1.	采用 `bny-row` 来定义网格，如：<div class="bny-row"></div>
2.	采用 `col-md` 来定义(column)列，且放在 grid 内。其中变量`md`代表不同屏幕的标记；变量 `` 代表列的宽度，范围从 1 到 12。
3.	列可以同时出现最多 5 种不同的组合，分别是：xs / sm / md / lg / xl ，以在不同尺寸屏幕下进行自动适配。
4.	可对列追加`col-md-offset3` 这样的预设类来定义列的间距和偏移。
5.	最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

响应式规则

栅格的响应式能力，得益于 CSS3 媒体查询 （Media Queries） ，针对不同尺寸的屏幕进行相应的适配处理。

	超小屏幕 (手机<768px)	小屏幕 (平板≥768px)	中等屏幕 (桌面≥992px)	大型屏幕 (桌面≥1200px)	超大屏幕 (桌面≥1400px)
bny-container	auto	750px	970px	1170px	1330px
标记	xs	sm	md	lg	xl
列对应类	col-xs*	col-sm*	col-md*	col-lg*	col-xl*
总列数	12
响应行为	始终按比例水平排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

响应式公共类

类名（class）	说明
show-*-block	定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg、xl
show-*-inline	定义不同设备下的 display: inline; * 可选值同上
show-*-inline-block	定义不同设备下的 display: inline-block; * 可选值同上
hidden-*	定义不同设备下的隐藏类，即： display: none; * 可选值同上

网格`class="bny-row"的属性`

属性名	说明
gap	定义网格之间的间距，默认值为 8px。不填写则不添加间距。可填写 10、12、14、18、22、26
column-gap	定义网格列之间的间距，默认值为 8px。不填写则不添加间距。可填写 10、12、14、18、22、26
row-gap	定义网格行之间的间距，默认值为 8px。不填写则不添加间距。可填写 10、12、14、18、22、26

自适应容器
网格布局