Material-UIグリッドリストを使用したMimicブートストラップグリッド

Question

私はMaterial-uiを初めて使い、ReactJSを使用しています。私はこのjsfiddleを持っているが、Bootstrapを使っている。 React Material-UIを使用してヘッダー付き2列パネルをどのようにコード化するべきかを知りたい。私はこのレイアウトを実現したい

からhttp://imgur.com/a/bzkOd

ここでは、ブートストラップ抜粋です：material-uiで

<div class="row"> 
    <div class="col-xs-12">Header</div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
     <div class="row"> 
      <!-- Left side --> 
      <div class="col-xs-3"> 
       <div class="row"> 
        <!-- 1st column --> 
        <div class="col-xs-12">Menu 1</div> 
        <div class="col-xs-12">Menu 2</div> 
        <div class="col-xs-12">Menu 3</div> 
        <div class="col-xs-12">Menu 4</div> 
        <div class="col-xs-12">Menu 5</div> 
        <div class="col-xs-12">Menu 6</div> 
       </div> 
      </div> 

      <!-- Right side --> 
      <div class="col-xs-9"> 
       <div class="row"> 
        <!-- 3rd column --> 
        <div class="col-xs-12">Dashboard</div> 
        <!-- 4th column --> 
        <div class="col-xs-12">Device Statistics</div> 
        <!-- colspan 2 --> 
        <div class="col-xs-12">Device Health</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/wLob4p03/1/

Answer 1

GridListグリッドレイアウトについてはされていません。 material design guidelinesをご覧ください：

グリッドリストは、標準のリストビューの代替です。

独自のグリッドレイアウトを実装するか、または準備が整ったライブラリを使用する必要があります。非常に似てあり、通常はブートストラップグリッドに基づいており、それらの多くは、ある、または：（いくつかのより高度なニーズに対応する）bootstrap-grid-react

ReactGrid

react-virtualized

あなたはおそらく可能性それ以上のものを見つけるには、あなたのニーズに最も適したものを見つけてください。個人的には、自分のグリッドコンポーネントを作成して、それを完全にコントロールできます。

Answer 2

私は材質UIは、ブートストラップ（https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui）のように非常に自身のフレキシボックスのレイアウトを実装したとして答えは、更新されるべきだと思います。

注：これはしかし材質-UIグリッドリストではありません。

彼らが最初に純粋に「コンポーネントのライブラリとして自分自身を維持したい表示されます。しかし、コア開発者の一人は、自分自身を持たないことが重要ではないと判断しました。これは現在コアコードに統合され、v1.0.0でリリースされる予定です。

現在（2017年4月）まだ次の/ alphaブランチにあります。 Material UI and Grid system