Web Responsive Grid

今天来简单介绍一下响应式的栅格解决方案

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,可以通过相应的配置来实现不同分辨率下的显示方式
栅格系统除了帮助你进行排版之外,也可以辅助你做好响应式。

  1. Bootstrap
    在传统的Bootstrap框架中, 栅格被划分为12格, 然后可以相互嵌套
    你可以使用他的一些预设,来实现移动设备和桌面屏幕的适配。
    例如lg - >= 1200, md >= 992 等

  2. ant design
    在ant design中, 栅格会被24等分(你也可以按照你的想法等分)
    你可以通过配置xs sm的span以及offset值来做一些响应式的工作
    他预设了六个响应尺寸:xs sm md lg xl xxl。
    如果你在某个分辨率下不想显示,那么也可以通过设置span=0的方式

例如配置

1
2
3
4
5
6
const colLayout = { xl: { span: 8, offset: 2 }, lg: 10, md: 12, sm: 24, xs: 24 }

<Row>
<Col {...colLayout}>
</Col>
</Row>