网格系统
简介
网格系统用于通过一系列的行与格子的组合创建页面布局,分单行和多行形式。
- 网格系统容器样式为
.grid
; - 网格系统采用CSS3的flex方式布局;
- 单行为所有格子在一行内显示,格子数量不受限制,单元格元素样式为
.x
,表示为水平方向的格子; - 多行形式将一行分为12个单元格,样式分别从
.x1
至.x12
,当一行内的格子数量大于12时,则换行显示。 - 如同表格一样,可合并单元格,如
.x6
则为6个单元格合并成一个。
网格系统如同表格一样,相同的是可以放置很多单元格,不同的是表格不同的行tr的约束,网格系统只要单元格数量加起来在12以内,就显示为一行,超过另起一行显示。
单行布局
单行布局为所有的格子在一行内;如果多行,则需要多个.grid
容器或使用下文的多行布局。
<div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div>
单行多格
<div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div>
强制换行
在需要换行的单元格后面加上.x100
单元格,则强制换行:
<div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x100"></div> <div class="x">.x</div> <div class="x">.x</div> </div> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x100"></div> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div>
单列布局
除了水平方向外,框架还定义了纵向单列的布局,需要在.grid
的基础上叠加.grid-y
样式,同时单元格样式则改为.y
。
<div class="grid grid-y" style="height:300px;"> <div class="y">.y</div> <div class="y">.y</div> <div class="y">.y</div> </div>
多行布局
多行布局为将一行分为12个单元格,样式为.x1
至.x12
;
.x1
为一个单元格;- 每个
.x1
为容器宽的1/12,12个.x1
占满整行; .x2
为2个.x1
合并成一个单元格,宽度为容器宽的2/12,.x3
至.x12
以此类推;.x12
为12个单元格合并成一个单元格,宽度占满整行;- 当一行内单元格数值小于等于12时,在一行内显示;
- 当一行内单元格数值大于12时则另起一行显示。
单元网格
<div class="grid"> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> <div class="x1">.x1</div> </div>
合并单元网格
等份网格
<div class="grid"> <div class="x2">.x2</div> <div class="x2">.x2</div> <div class="x2">.x2</div> <div class="x2">.x2</div> <div class="x2">.x2</div> <div class="x2">.x2</div> </div> <div class="grid"> <div class="x3">.x3</div> <div class="x3">.x3</div> <div class="x3">.x3</div> <div class="x3">.x3</div> </div> <div class="grid"> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> </div> <div class="grid"> <div class="x6">.x6</div> <div class="x6">.x6</div> </div> <div class="grid"> <div class="x12">.x12</div> </div>
网络只能按1,2,3,4,6,12等份排列网格,在应用中也会常用到5等份的,框架特别增加了.x20
网格,每格宽为20%,专用于5等份时排列。
不等份排列
不等份为格子不按平均分配,一行内数值在12以内的;
<div class="grid"> <div class="x4">.x4</div> <div class="x8">.x8</div> </div> <div class="grid"> <div class="x3">.x3</div> <div class="x6">.x6</div> <div class="x3">.x3</div> </div> <div class="grid"> <div class="x2">.x2</div> <div class="x4">.x4</div> <div class="x2">.x2</div> <div class="x4">.x4</div> </div> <div class="grid"> <div class="x1">.x1</div> <div class="x3">.x3</div> <div class="x2">.x2</div> <div class="x4">.x4</div> <div class="x2">.x2</div> </div>
自动宽
在固定的格子数、.x
及.x0
,实现宽度自动填充;
<div class="grid"> <div class="x4">.x4</div> <div class="x">.x</div> </div> <div class="grid"> <div class="x">.x</div> <div class="x0">.x0</div> <div class="x3">.x3</div> </div>
多行网格
单行数值超过12时,则另起一行显示,形成多行网格:
<div class="grid"> <div class="x6">.x6</div> <div class="x6">.x6</div> <div class="x6">.x6</div> <div class="x6">.x6</div> </div> <div class="grid"> <div class="x3">.x3</div> <div class="x9">.x9</div> <div class="x12">.x12</div> </div> <div class="grid"> <div class="x4">.x4</div> <div class="x6">.x6</div> <div class="x2">.x2</div> <div class="x3">.x3</div> <div class="x5">.x5</div> <div class="x4">.x4</div> </div> <div class="grid"> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> </div>
强制换行
同时也可以用.x100
强制换行
<div class="grid"> <div class="x1">.x1</div> <div class="x2">.x2</div> <div class="x3">.x3</div> <div class="w100"></div> <div class="x4">.x4</div> <div class="x5">.x5</div> <div class="x6">.x6</div> </div>
多列布局
在一列内.y
的数值在12以内一列,超过12则另起一列;
<div class="grid grid-y" style="height:300px;"> <div class="y6">.y6</div> <div class="y6">.y6</div> <div class="y6">.y6</div> <div class="y6">.y6</div> </div>
在.y
的基础上,增加.x
样式,可形成多列布局:
<div class="grid grid-y" style="height:300px;"> <div class="x3 y6">.x3.y6</div> <div class="x3 y6">.x3.y6</div> <div class="x4 y6">.x4.y6</div> <div class="x4 y6">.x4.y6</div> <div class="x5 y6">.x5.y6</div> <div class="x5 y6">.x5.y6</div> </div>
自动高
在预设好部份单元格高度的情况下,使用.y
及.y0
可实现高度自动填充:
<div class="grid grid-y" style="height:300px;"> <div class="y3">.y3</div> <div class="y">.y</div> </div> <div class="grid grid-y" style="height:300px;"> <div class="y">.y</div> <div class="y0">.y0</div> <div class="y2">.y2</div> </div>
强制换列
在预设好单元格宽度的情况下,使用.y100
可强制换列:
<div class="grid grid-y" style="height:300px;"> <div class="x4 y6">.x4.y6</div> <div class="x4 y6">.x4.y6</div> <div class="x4 y6">.x4.y6</div> <div class="y100"></div> <div class="x4 y6">.x4.y6</div> <div class="x4 y6">.x4.y6</div> </div>
对齐
因网格采用的是flex布局,所以上节弹性布局中的对齐样式,同样可应用在网格系统里。
横向对齐
即为主轴对齐,样式有.flex
-start|center|end|between|around。
<div class="grid flex-center"> <div class="x2">.x2</div> <div class="x2">.x2</div> <div class="x2">.x2</div> </div> <div class="grid flex-end"> <div class="x2">.x2</div> <div class="x2">.x2</div> <div class="x2">.x2</div> </div> <div class="grid flex-between"> <div class="x2">.x2</div> <div class="x2">.x2</div> <div class="x2">.x2</div> </div>
纵向对齐
即为交叉轴对齐,样式有.flex-items
-start|center|end|baseline|stretch。
<div class="grid flex-items-start" style="height:100px;"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> <div class="grid flex-items-center" style="height:100px;"> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> </div> <div class="grid flex-items-end" style="height:100px;"> <div class="x2">.x2</div> <div class="x3">.x3</div> <div class="x4">.x4</div> </div>
项目对齐
弹性项目的对齐,即为格子的对齐方式,样式有.flex-self
-start|center|end|baseline|stretch。
<div class="grid" style="height:100px;"> <div class="x flex-self-start">.x</div> <div class="x flex-self-center">.x</div> <div class="x flex-self-end">.x</div> </div>
多行对齐
即在换行的情况下,多轴对齐方式,样式有.flex-content
-start|center|end|between|around。
<div class="grid flex-content-center" style="height:160px;"> <div class="x6">.x6</div> <div class="x6">.x6</div> <div class="x12">.x12</div> <div class="x3">.x3</div> <div class="x5">.x5</div> </div> <div class="grid flex-content-between" style="height:160px;"> <div class="x6">.x6</div> <div class="x6">.x6</div> <div class="x12">.x12</div> <div class="x3">.x3</div> <div class="x5">.x5</div> </div>
排序
单元格按默认的节点排序,如需要改变顺序,可使用.order
0-13改变排序,0为排最前面,13为排最后面:
行排序
<div class="grid"> <div class="x1 order5">.x1</div> <div class="x2 order13">.x2</div> <div class="x3 order1">.x3</div> <div class="x4 order2">.x4</div> <div class="x5 order0">.x5</div> <div class="x6 order3">.x6</div> </div>
列排序
<div class="grid grid-y"> <div class="y1 order5">.y1</div> <div class="y2 order13">.y2</div> <div class="y3 order1">.y3</div> <div class="y4 order2">.y4</div> <div class="y5 order0">.y5</div> <div class="y6 order3">.y6</div> </div>
水平偏移
单元格叠加.move
1-11样式,可以快速实现元素的水平方向偏移:
<div class="grid"> <div class="x4 move4">.x4</div> </div> <div class="grid"> <div class="x4">.x4</div> <div class="x4 move4">.x4</div> </div> <div class="grid"> <div class="x3 move3">.x3</div> <div class="x3 move3">.x3</div> </div> <div class="grid"> <div class="x2">.x2</div> <div class="x3 move1">.x3</div> <div class="x3">.x3</div> <div class="x2 move1">.x2</div> </div>
自动偏移
配合盒子模型的.margin-left-auto
、.margin-center-auto
、.margin-right-auto
可实现单元格自动偏移。
<div class="grid"> <div class="x3 margin-left-auto">.x3</div> </div> <div class="grid"> <div class="x3 margin-center-auto">.x3</div> </div> <div class="grid"> <div class="x3 margin-right-auto">.x3</div> </div> <div class="grid"> <div class="x3">.x3</div> <div class="x3 margin-left-auto">.x3</div> </div> <div class="grid"> <div class="x3">.x3</div> <div class="x3 margin-center-auto">.x3</div> <div class="x3">.x3</div> </div> <div class="grid"> <div class="x3 margin-right-auto">.x3</div> <div class="x3">.x3</div> </div>
因margin高不是容器高的百分比,而是宽的,所以无法实现垂直的偏移效果。
内嵌套
内嵌套大单元格内放网格,如同表格里的单元格内放整个表格:
<div class="grid"> <div class="x8"> <div class="grid"> <div class="x6">.x6</div> <div class="x6">.x6</div> </div> .x8 </div> <div class="x4">.x4</div> </div> <div class="grid"> <div class="x6"> <div class="grid"> <div class="x4">.x4</div> <div class="x8">.x8</div> </div> .x6 </div> <div class="x6"> <div class="grid"> <div class="x3">.x3</div> <div class="x4">.x4</div> <div class="x5">.x5</div> </div> .x6 </div> </div>
列嵌套
<div class="grid grid-y" style="height:300px;"> <div class="y8"> <div class="grid grid-y"> <div class="y6">.y6</div> <div class="y6">.y6</div> </div> </div> <div class="y4"> <div class="grid"> <div class="x4">.x4</div> <div class="x8">.x8</div> </div> </div> </div>
网格间距
默认的网格之间是没有间距的,可以给单元格的内容加上填充或边距方式获取间距;因此框架定义.grid
-大小来处理单元格之间的边距,大小分别为mini、small、middle、big、large五个等级:
.grid
网格间距需要包含在.grid
-大小上使用;
<div class="grid-mini"> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> </div> <div class="grid-small"> <div class="grid"> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> </div> </div> <div class="grid-middle"> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> </div> <div class="grid-big"> <div class="grid"> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> </div> </div> <div class="grid-large"> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> </div>
配合容器使用
因边距处理的关系,使用网格间距.grid
-大小与容器叠加使用时,建议填充值为1rem,如.container .grid-small
或.padding .grid-big
样式。
<div class="grid-mini padding"> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> </div> <div class="grid-small padding"> <div class="grid"> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> </div> </div> <div class="grid-middle padding"> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> </div> <div class="grid-big padding"> <div class="grid"> <div class="x4">.x4</div> <div class="x4">.x4</div> <div class="x4">.x4</div> </div> </div> <div class="grid-large padding"> <div class="grid"> <div class="x">.x</div> <div class="x">.x</div> <div class="x">.x</div> </div> </div>
列间距
同样,在列垂直布局的情况下,间距同样适用。
<div class="grid-middle padding" style="height:300px;"> <div class="grid"> <div class="y">.y</div> <div class="y">.y</div> <div class="y">.y</div> </div> </div>
九宫格
根据网格系统,快速使用行.x
和列.y
实现九宫格布局实例:
<div class="grid-big padding"> <div class="grid"> <div class="x4">1</div> <div class="x4">2</div> <div class="x4">3</div> <div class="x4">4</div> <div class="x4">5</div> <div class="x4">6</div> <div class="x4">7</div> <div class="x4">8</div> <div class="x4">9</div> </div> </div> <div class="grid-middle padding"> <div class="grid grid-y" style="height:300px;"> <div class="y4">1</div> <div class="y4">2</div> <div class="y4">3</div> <div class="y4">4</div> <div class="y4">5</div> <div class="y4">6</div> <div class="y4">7</div> <div class="y4">8</div> <div class="y4">9</div> </div> </div> <div class="grid-small padding"> <div class="grid grid-y" style="height:300px;"> <div class="w4 y4">1</div> <div class="w4 y4">2</div> <div class="w4 y4">3</div> <div class="w4 y4">4</div> <div class="w4 y4">5</div> <div class="w4 y4">6</div> <div class="w4 y4">7</div> <div class="w4 y4">8</div> <div class="w4 y4">9</div> </div> </div>
合理使用网格系统,便利网页排版,实现快速布局开发,下一节,我们将实现响应式网格系统,可在不同设备响应显示不同的单元格数量,实现页面的适配。