# 网格

提醒

box-sizing必须设置为border-box

# 24 格网格

预览

代码

<f-row class="demoRow">
  <f-col span="8">
    <div class="demoCol">8</div>
  </f-col>
  <f-col span="8">
    <div class="demoCol">8</div>
  </f-col>
  <f-col span="8">
    <div class="demoCol">8</div>
  </f-col>
</f-row>

<f-row class="demoRow">
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
</f-row>

<f-row class="demoRow">
  <f-col span="4">
    <div class="demoCol">4</div>
  </f-col>
  <f-col span="4">
    <div class="demoCol">4</div>
  </f-col>
  <f-col span="4">
    <div class="demoCol">4</div>
  </f-col>
  <f-col span="4">
    <div class="demoCol">4</div>
  </f-col>
  <f-col span="4">
    <div class="demoCol">4</div>
  </f-col>
  <f-col span="4">
    <div class="demoCol">4</div>
  </f-col>
</f-row>

<f-row class="demoRow">
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
</f-row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

# 设置 gutter

预览

代码

<f-row class="demoRow" gutter="10">
  <f-col span="8">
    <div class="demoCol">8</div>
  </f-col>
  <f-col span="8">
    <div class="demoCol">8</div>
  </f-col>
  <f-col span="8">
    <div class="demoCol">8</div>
  </f-col>
</f-row>

<f-row class="demoRow" gutter="10">
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
  <f-col span="6">
    <div class="demoCol">6</div>
  </f-col>
</f-row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 设置空隙

预览

代码

<f-row class="demoRow" gutter="10">
  <f-col span="8">
    <div class="demoCol">8</div>
  </f-col>
  <f-col span="8" offset="8">
    <div class="demoCol">8</div>
  </f-col>
</f-row>
<f-row class="demoRow" gutter="10">
  <f-col span="6" offset="6">
    <div class="demoCol">6</div>
  </f-col>
  <f-col span="6" offset="6">
    <div class="demoCol">6</div>
  </f-col>
</f-row>
<f-row class="demoRow" gutter="10">
  <f-col span="4">
    <div class="demoCol">4</div>
  </f-col>
  <f-col span="4" offset="4">
    <div class="demoCol">4</div>
  </f-col>
  <f-col span="4" offset="8">
    <div class="demoCol">4</div>
  </f-col>
</f-row>
<f-row class="demoRow" gutter="10">
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2" offset="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2" offset="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2" offset="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2">
    <div class="demoCol">2</div>
  </f-col>
  <f-col span="2" offset="2">
    <div class="demoCol">2</div>
  </f-col>
</f-row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

f-row API

参数	说明	类型	默认值	必须	可选值
gutter	布局之间的间隙，单位是 px	String	0	否	任意
align	布局内部的 flex 排列方式	String	left	否	left\|middle\|right

f-col API

参数	说明	类型	默认值	必须	可选值
span	布局占几格	String	无	是	0-24
offset	布局左边的间隙占几格	String	0	否	0-24

TIP

布局为24分布局，span + offset 不能大于24

← Collapse Input →