React Grid系统等价于Bootstrap的网格系统？

Question

我正在寻找开始设计我的React应用程序样式。我以前使用过Bootstrap的网格系统，现在正在寻找React网格系统。 React开发人员通常使用哪些应用程序的Grid系统/布局？

感谢

Answer 1

如果你的目标只是现代的浏览器（即那些具有flexbox support），你可能要调查react-flexbox-grid它提供了一组阵营实现了常用的网格的概念，如和Column组件。我已经成功地使用了几个项目。

此选项避免了在整体UI库拉，只使用网格部分。

Answer 2

我刚使用的引导，无论是造型直接与引导CSS或通过本react-bootstrap库。

Answer 3

我不知道你的阵营网格系统，因为它总是CSS网格系统是什么意思。但是在我的项目中，我使用react-bootstrap库，我猜这是你正在寻找的东西。唯一需要注意的是你必须包含bootstrap css文件（例如c.d.n.），除此之外它的工作非常好，并且有很好的文档。

P.S.如果你想只使用网格系统，你将不得不找到，只有引导电网CSS，然后从库中导入仅网格组件 - Grid，和Col。

Answer 4

我曾经白手起家电网系统很长一段时间，但过了一段时间我累了加入一些类的，它开始让我的HTML不可读。我会建议使用flexbox。这是一个很好的替代品，正在成为响应式设计的标准。这也是supported by all major browsers这很好。

Answer 5

看看fluid-react我建。它不需要额外的CSS。

<Container> 
    <Row> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">1</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">2</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">3</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">4</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">5</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">6</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">7</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">8</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">9</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">10</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">11</Col> 
     <Col xs="12" sm="6" md="4" lg="3" xl="2">12</Col> 
    </Row> 
</Container>