React/Material-UIでGridを試してみる

17364 ワード
React material-ui React テキストリンク
./src/components/ui/MyGrid.js
import React from "react";
import { makeStyles, Grid, Paper } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  paper: {
    backgroundColor: "#1e50a2",
    color: "#f8f4e6",
    height: "128px",
  },
}));

const MyGrid = () => {
  const classes = useStyles();
  return (
    <Grid container spacing={1}>
      <Grid item xs={12}>
        <Paper className={classes.paper}>xs=12</Paper>
      </Grid>
      <Grid item xs={6}>
        <Paper className={classes.paper}>xs=6</Paper>
      </Grid>
      <Grid item xs={6}>
        <Paper className={classes.paper}>xs=6</Paper>
      </Grid>
      <Grid item xs={4}>
        <Paper className={classes.paper}>xs=4</Paper>
      </Grid>
      <Grid item xs={4}>
        <Paper className={classes.paper}>xs=4</Paper>
      </Grid>
      <Grid item xs={4}>
        <Paper className={classes.paper}>xs=4</Paper>
      </Grid>
      <Grid item xs={3}>
        <Paper className={classes.paper}>xs=3</Paper>
      </Grid>
      <Grid item xs={3}>
        <Paper className={classes.paper}>xs=3</Paper>
      </Grid>
      <Grid item xs={3}>
        <Paper className={classes.paper}>xs=3</Paper>
      </Grid>
      <Grid item xs={3}>
        <Paper className={classes.paper}>xs=3</Paper>
      </Grid>
      <Grid item xs={2}>
        <Paper className={classes.paper}>xs=2</Paper>
      </Grid>
      <Grid item xs={2}>
        <Paper className={classes.paper}>xs=2</Paper>
      </Grid>
      <Grid item xs={2}>
        <Paper className={classes.paper}>xs=2</Paper>
      </Grid>
      <Grid item xs={2}>
        <Paper className={classes.paper}>xs=2</Paper>
      </Grid>
      <Grid item xs={2}>
        <Paper className={classes.paper}>xs=2</Paper>
      </Grid>
      <Grid item xs={2}>
        <Paper className={classes.paper}>xs=2</Paper>
      </Grid>
      <Grid item xs={2}>
        <Paper className={classes.paper}>xs=2</Paper>
      </Grid>
    </Grid>
  );
};

export default MyGrid;
./src/App.js
import logo from "./logo.svg";
import "./App.css";
import MyGrid from "./components/ui/MyGrid";

function App() {
  return (
    <div className="App">
      <MyGrid />
    </div>
  );
}

export default App;