マテリアルUIとグリッドシステム

Material-UIで少し遊んでいます。（Bootstrapのように）グリッドレイアウトを作成するためのオプションはありますか？

そうでない場合、この機能を追加する方法は何ですか？

GridListコンポーネントがありますが、それはいくつかの異なる目的を持っていると思います。

マテリアルUIは、グリッドコンポーネントを介して独自のFlexboxレイアウトを実装しています。

彼らは当初、自分たちを純粋に「コンポーネント」ライブラリとして維持したかったようです。しかし、コア開発者の1人は、独自の開発者がいないことが重要であると判断しました。これはコアコードに統合され、v1.0.0でリリースされました。

次の方法でインストールできます。

npm install @material-ui/core

これは、コード例を含む公式ドキュメントに含まれています。

マテリアルデザインの仕様の説明から：

グリッドリストは、標準のリストビューに代わるものです。グリッドリストは、レイアウトやその他の視覚的プレゼンテーションに使用されるグリッドとは異なります。

非常に軽量なグリッドコンポーネントライブラリを探している場合は、Reactの実装であるReact-Flexbox-Gridを使用していflexboxgrid.cssます。

その上、React-Flexbox-Gridは、material-uiとreact-toolbox（代替のマテリアルデザインの実装）の両方でうまく機能しました。

私はこれに対する答えを探しましたが、私が見つけた最良の方法は、さまざまなコンポーネントにFlexとインラインスタイルを使用することでした。

たとえば、2つの紙のコンポーネントでフルスクリーンを2つの垂直コンポーネント（1：4の比率）に分割するには、次のコードが適切に機能します。

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

これで、さらにいくつかの計算を使用して、コンポーネントをページ上で簡単に分割できます。

フレックスについてさらに読む

これが返答をするのに遅すぎないことを望みます。

また、プロジェクトで使用するリアクショングリッドシステムのような、シンプルで堅牢、柔軟性があり、高度にカスタマイズ可能なブートストラップも探していました。

私が知っている最高のものはreact-pure-grid https://www.npmjs.com/package/react-pure-gridです

react-pure-grid グリッドシステムのあらゆる側面をカスタマイズする機能を提供すると同時に、おそらくあらゆるプロジェクトに適した組み込みのデフォルトを備えています

使用法

npm install react-pure-grid --save

-

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);

私が行う方法は、http：//getbootstrap.com/customize/にアクセスして、「グリッドシステム」のみをチェックしてダウンロードすることです。あるbootstrap-theme.cssとbootstrap.cssダウンロードしたファイルでは、と私は後者のみを必要としています。

このようにして、Bootstrapのグリッドシステムを使用して、他のすべてをMaterial UIから使用できます。

レスポンシブレイアウトにはhttps://react-bootstrap.github.io/を、すべてのコンポーネントにはMaterial-uiを使用します

マテリアルデザインのレスポンシブ動作の標準を実装するUIフレームワークを見つけるのが難しいため、マテリアルデザインのグリッドシステムを実装する2つのパッケージを作成しました。

1. CSSフレームワーク：material-sensitive-grid
2. そのフレームワークを実装する一連のReactコンポーネント：react-material-sensitive-grid。

これらのパッケージは、Googleで概説されているレスポンシブUIの標準に準拠しています。標準で指定されているすべてのビューポートサイズは、適切なガター、推奨される列数、さらには1600 dpを超えるレイアウトの動作を考慮してサポートされています。デバイスメトリックガイドのすべてのデバイスで推奨されているとおりに動作するはずです。

以下は、純粋にMUIグリッドシステムによって作成されます。

以下のコードで、

// MuiGrid.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓CodeSandbox↓

これは古い質問ですが、グーグルは私をここに連れてきます。少し検索したところ、良いパッケージが見つかりました：https : //www.npmjs.com/package/react-grid-system

これは最高で使いやすく、軽量だと思います。

以下は、ブートストラップに似たmaterial-uiを使用したグリッドシステムの例です。

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>