在前端开发中，使用栅格系统是一个非常普遍的需求。React 社区中有很多相关的成熟库，如 react-grid-system、react-bootstrap 等等。而本文将介绍一款较为轻量级的 npm 包，名为 react-grid-system-lite，它提供了基础的栅格系统功能，同时也支持响应式布局。
安装
首先，我们需要通过 npm 安装 react-grid-system-lite。
npm install react-grid-system-lite
使用
react-grid-system-lite 提供了 Row 和 Col 两个组件，用于快速搭建栅格布局。
Row
Row 组件提供了对栅格布局的基础支持，它接受以下属性：
alignItems: 用于指定子元素的垂直对齐方式，默认为stretch，可选值有flex-start、center、flex-end、baseline。justifyContent: 用于指定子元素的水平对齐方式，默认为flex-start，可选值有center、flex-end、space-between、space-around。wrap: 用于指定子元素的换行方式，默认为nowrap，可选值有wrap、wrap-reverse。
示例代码：
import { Row } from 'react-grid-system-lite';
<Row alignItems="center" justifyContent="center" wrap="wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Row>Col
Col 组件用于定义子元素的布局，它接受以下属性：
xs、sm、md、lg、xl: 用于指定当前屏幕尺寸下子元素所占用的栅格数，默认为false，即不占用。
示例代码：
-- -------------------- ---- -------
------ - ---- --- - ---- -------------------------
-----
---- ------- -------
--
------
---- ------- -------
--
------
------以上代码将在小于或等于 sm 屏幕尺寸下，左边和右边均占用 6 个栅格，例如在 iPhone 上的显示效果为：
响应式布局
React-grid-system-lite 支持响应式布局，只需要传递不同屏幕尺寸下的栅格数即可。
示例代码：
-- -------------------- ---- -------
------ - ---- --- - ---- -------------------------
-----
---- ------- -------
--
------
---- ------- -------
--
------
------以上代码将在小于或等于 xs 屏幕尺寸下，左边和右边均占用 12 个栅格，在 md 屏幕尺寸下，左边和右边均占用 6 个栅格。
更多响应式布局的示例，请参考官方文档。
结语
React-grid-system-lite 是一个轻量级、易于上手的栅格系统库，支持响应式布局、提供了基础的栅格系统能力。虽然它没有像 Bootstrap 那样强大的 UI 组件库，但对于一些简单的项目，采用它的成本十分低廉。如果你需要一个简单的栅格系统库，不妨试试 react-grid-system-lite。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005551281e8991b448d2477