Question

我正在玩Material-UI。是否有任何创建网格布局的选项（如Bootstrap）？

如果没有，添加此功能的方法是什么？

有一个GridList component，但我想它有一些不同的目的。

Answer 1

Material UI已实现了自己的Flexbox布局。

看起来他们initially wanted将自己保持为纯粹的“组件”库。但是其中一个核心开发人员decided it was too important not to have their own。它现在是merged into the core code并且是released with v1.0.0。

您可以通过以下方式安装：

npm install @material-ui/core

现在是官方documentation with code examples。

Answer 2

来自material design specs的描述：

网格列表是标准列表视图的替代方法。网格列表是与用于布局和其他视觉演示的网格不同。

如果您正在寻找一个非常轻量级的网格组件库，我正在使用React-Flexbox-Grid，在React中实现flexboxgrid.css。

最重要的是，React-Flexbox-Grid与material-ui和react-toolbox（替代材料设计实现）的效果非常好。

Answer 3

我四处寻找答案，我发现最好的方法是在不同组件上使用Flex和内联样式。

例如，为了使两个纸张组件将我的全屏分成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>
    )
  }
}

现在，通过更多计算，您可以轻松地在页面上划分组件。

Further Reading on flex

Answer 4

我希望现在发表回应还为时不晚。

我还在寻找一种简单，强大，灵活且高度可定制的引导程序，如在我的项目中使用的反应网格系统。

我所知道的最好的是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>
);

Answer 5

我的方法是转到http://getbootstrap.com/customize/，只检查“网格系统”下载。下载的文件中有var roundOne = document.getElementById("roundOne").value; var roundTwo = document.getElementById("roundTwo").value; function add() { var total = roundOne + roundTwo; document.querySelector(".total").textContent = total; }和bootstrap-theme.css，我只需要后者。

通过这种方式，我可以使用Bootstrap的网格系统，以及Material UI中的所有其他内容。

Answer 6

我只使用https://react-bootstrap.github.io/作为响应式布局，使用材料ui作为所有组件

Answer 7

我很难找到能够实现Material Design的响应行为标准的UI框架，因此我创建了两个实现Material Design网格系统的软件包：

CSS框架：material-responsive-grid
实现该框架的一组React组件：react-material-responsive-grid。

这些套餐遵循Google概述的responsive UI标准。考虑到正确的装订线，建议的列数，甚至超过1600 dp的布局行为，都支持其标准中指定的所有视口大小。它应该按照Device Metrics指南中每个设备的建议行事。

Answer 8

以下完全由MUI Grid system制成，

使用以下代码，

// 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↓

Answer 9

这是具有material-ui的网格系统的示例，类似于bootstrap：

<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>

Answer 10

这是一个老问题，但谷歌把我带到这里。经过一番搜索，我发现了一个很好的包裹：https://www.npmjs.com/package/react-grid-system

我认为这是最好的，易于使用和轻量级。

材质UI和网格系统

10 个答案: