Back to Layui

layout 栅格布局

examples/layout-grid.html

2.13.6846 B
Original Source

始终等比例水平排列

50%

50%

25%

25%

25%

25%

移动设备、桌面端的不同展现

移动设备:100%、桌面:60%

移动设备:50%、桌面:40%

移动设备:50%、桌面:100%

移动设备、平板、桌面端的不同展现

50% | 33.33% | 33.33%

50% | 66.67% | 33.33%

33.33% | 100% | 33.33%

33.33% | 50% | 66.67%

33.33% | 50% | 33.33%

从小屏幕堆叠到桌面水平排列

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

75%

25%

33.33%

33.33%

33.33%

50%

50%

分栏间隔

1/4

1/4

1/4

1/4

1/3

1/3

1/3

75%

25%

58.33%

41.67%

33.33%

33.33%

33.33%

列偏移

33.33%

偏移4列

偏移5列

不偏移

偏移3列

偏移1列

嵌套

内部列

内部列

内部列

内部列

内部列

内部列

流体容器(宽度自适应,不固定)

25%

25%

25%

25%