CODEWITHSUNDEEP
reactjsmaterial-ui
Carlos
Carlos

Reputation: 945

Set Material-UI vertical and centered aligned Grid items in layout

I'm pretty new to Material-UI and I would like to have this basic implementation with Grid components:

Centered align Grid items

But so far I'm unable to center the Grid items correctly. I tried different approaches but none of them worked. This is my code so far:

<Grid container direction="column">
  <Grid item>
    <AppBar position="static">
      <Toolbar>MY APP</Toolbar>
    </AppBar>
  </Grid>
  <Grid item container direction="column">
    <Grid item xs={11}>
      Some text
    </Grid>
    <Grid item xs={11}>
      Some text
    </Grid>
  </Grid>
</Grid>

Thanks in advance for any help.

Upvotes: 0

Views: 47

Answers (2)

jharris711
jharris711

Reputation: 612

You need to use some more of the Material UI components to achieve your goal. You need to use the Paper and Typography components and the makeStyles function. I set up a demo here and the code should look something like this:

import "./styles.css";
import Grid from "@material-ui/core/Grid";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";

// Set your styles for the paper component here:
const paperStyles = makeStyles((theme) => ({
  root: {
    margin: "15px",
    height: "150px",
    padding: "20px",
    backgroundColor: "#cfcfcf"
  }
}));

export default function App() {
  // Call your styles function:
  const paperClasses = paperStyles();
  return (
    <div className="App">
      <Grid container direction="column">
        <Grid item>
          <AppBar position="static">
            <Toolbar>MY APP</Toolbar>
          </AppBar>
        </Grid>
        <Grid item container direction="column">
          // Use the paper component here and assign paperClasses.root to the className prop:
          <Paper className={paperClasses.root} item xs={11} >
            // Put your other Grid components inside of the paper component:
            <Grid item xs={11}>
              // Use the Typography component for your text with the align prop set to "left":
              <Typography variant="subtitle1" align="left">
                Some text
              </Typography>
            </Grid>
          </Paper>
          <Paper className={paperClasses.root} item xs={11}>
            <Grid item xs={11}>
              <Typography variant="subtitle1" align="left">
                Some text
              </Typography>
            </Grid>
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

Image of demo for submitted answer with Paper divs with align prop set to left

Upvotes: 1

Adham
Adham

Reputation: 173

If I understood your question, I think this should fix it, just add alignContent='center' and check props of Grid

     <Grid container direction="column">
  <Grid item>
    <AppBar position="static">
      <Toolbar>MY APP</Toolbar>
    </AppBar>
  </Grid>
  <Grid item container direction="column" alignContent='center' >
    <Grid item xs={11}>
      Some text
    </Grid>
    <Grid item xs={11}>
      Some text
    </Grid>
  </Grid>
</Grid>

Upvotes: 0

Related Questions