Material-UI：如何制作对齐的表格

Question

I'm new to Material-UI. How does one typically build a form, where some fields are grouped horizontally while others are stacked vertically and all the fields aligns nicely both vertically and horizontally? See the following example picture:

I know how to build this kind of form with plain HTML tables, but what is the "correct" Material-UI way? Example code would be nice.

Answer 1

Here you have a sample for the first two rows:

<form>
<Grid container>
  <Grid item xs="12">
    <TextField id="standard-basic" label="Standard"/>
  </Grid>
</Grid>

<Grid container>
  <Grid item xs="8">
    <TextField id="standard-basic" label="Standard"/>
  </Grid>
  <Grid item xs="4">
    <TextField id="standard-basic" label="Standard"/>
  </Grid>
</Grid>
</form>