Which is the best way to specify "justify" for grid item in material-ui?

Question

I have a simple Grid from the material-UI library. It looks like that:

<Grid container>
    <Grid item sm={6}>
        <SearchPanel/>
    </Grid>
    <Grid item sm={6}>
        <ItemStatusFilter/>
    </Grid>
</Grid>

I just can't understand how can I align the first grid item in the center, and the second, for example, on the right side?

UPD: I could do it with justify-content: flex-end!important in my CSS files, but I'm not sure that it's the best way.

Answer 1

Below is one way of doing this for v3 and v4 of Material-UI (v5 example further down).

import React from "react";
import ReactDOM from "react-dom";

import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <Grid container>
      <Grid item xs={4}>
        {/* Intentionally Empty */}
      </Grid>
      <Grid container item xs={4} justify="center">
        <div>Search Panel</div>
      </Grid>
      <Grid container item xs={4} justify="flex-end">
        <div>Item Status Filter</div>
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This is the general idea of Duncan's comment. I have changed sm to xs just so I could verify the behavior on any size screen. In the end, Material-UI's Grid just adds some convenience around the CSS Flexbox model, so to know how to do it with Grid you need to understand how you would do it in CSS. The main thing Grid adds is the easy responsive aspects of controlling the 12-column grid differently for different screen sizes.

Here's an equivalent example for v5 (justify prop renamed to justifyContent):

import React from "react";
import ReactDOM from "react-dom";

import Grid from "@mui/material/Grid";

function App() {
  return (
    <Grid container>
      <Grid item xs={4}>
        {/* Intentionally Empty */}
      </Grid>
      <Grid container item xs={4} justifyContent="center">
        <div>Search Panel</div>
      </Grid>
      <Grid container item xs={4} justifyContent="flex-end">
        <div>Item Status Filter</div>
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);