React Grid SystemはBootstrapのGridシステムと同等ですか？

Question

Reactアプリのスタイリングを開始する予定です。以前はBootstrapのGridシステムを使っていましたが、今はReactグリッドシステムを探しています。 Reactの開発者は、自分のAppのGridシステム/レイアウトで何を使うのですか？

おかげで

Answer 1

あなたが唯一の近代的なブラウザをターゲットにしている場合（すなわちflexbox supportあり）あなたはとColumnなどの通常のグリッドの概念を実装するコンポーネントに反応のセットを提供していますreact-flexbox-gridを調査することをお勧めします。私はいくつかのプロジェクトでうまく使用しました。

このオプションを使用すると、UIライブラリ全体をプルしてグリッド部分のみを使用する必要がなくなります。

Answer 2

私は直接ブートストラップCSSまたはこのreact-bootstrapライブラリを経由して、いずれかのスタイリングをブートストラップを使用しています。

Answer 3

React Gridシステムは、常にCSSグリッドシステムなので、何を意味するのか分かりません。しかし私のプロジェクトではreact-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>