很好地格式化网格答案

【问题标题】：Format Grid nicely很好地格式化网格
【发布时间】：2019-02-01 05:55:47
【问题描述】：

我正在尝试以“易于查看”的方式显示数据，但很难正确构建它。

我想将页面设置为如下格式：第一个网格包含 3 个文本字段，一个在另一个下方，并在它们上方有适当的标题。 2nd Grid 与其他 3 个字段相同，并且 3rd Grid 包含 7 个文本字段，我想在第一列显示 -> 3 在第一列，2 在第二列，2 和最后一个，都在同一个标题下。

如果我将所有最后 7 个字段放在同一个网格下，它们都会出现在同一列中。现在它几乎可以工作了，但只有前 3 个文本字段在标题下方的边距正确，而其他 4 个出现在不同的边距上。

这是我的代码：（如果有人有改进显示的想法，我很乐意听到）

    <Grid container spacing={24}>
      <Grid item sm={3}> // First grid - contains 3 text fields
        <Typography variant="subheading" gutterBottom color="primary" >
          {labels.brokerGeneralDetails}
        </Typography>
        <Grid item sm={10}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm={1}>  // Second grid - contains 3 text fields
        <Typography variant="subheading" gutterBottom color="primary">
          {labels.brokerAccountDetails}
        </Typography>
        <Grid item sm={6}>
          <TextField
           ...
          />
        </Grid>
        <Grid item sm={3}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm={3}>  // Third grid - Should contain 7 text fields in 3 columns
        <Typography variant="subheading" gutterBottom color="primary">
          {labels.brokerOtherDetails}
        </Typography>
        <Grid >
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={1}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm={1}> // Should be the second column
        <Grid>
          <TextField
            ...
          />
        </Grid>
        <Grid >
          <TextField
           ...
          />
        </Grid>
      </Grid>
      <Grid item sm={1}> // Should be the third column
        <Grid>
          <TextField
          ...
          />
        </Grid>
        <Grid>
          <TextField
           ...
          />
        </Grid>
      </Grid>
    </Grid>

我希望它显示如下：

                    Title3          Title2       Title1
       Txt6   Txt4   Txt1          Txt1         Txt1
       Txt7   Txt5   Txt2          Txt2         Txt2
                     Txt3          Txt3         Txt3

现在是：

       Txt6   Txt4  Title3          Title2       Title1
       Txt7   Txt5   Txt1          Txt1         Txt1
                     Txt2          Txt2         Txt2
                     Txt3          Txt3         Txt3

【问题讨论】：

你能把设计贴在这里吗？
当前显示的图片？ @SakhiMansoor
不，我的意思是想要的输出
@SakhiMansoor 更新
我在下面添加了一个答案。希望这会有所帮助

标签： javascript reactjs grid jsx

【解决方案1】：

我不确定这是否是根据您的需要构建网格的最佳方式，但我会这样做：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Label Grid.Column="2" Content="Title3" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="3" Content="Title2" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="4" Content="Title1" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="0" Grid.Row="1" Content="Txt6" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="1" Grid.Row="1" Content="Txt4" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="2" Grid.Row="1" Content="Txt1" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="3" Grid.Row="1" Content="Txt1" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="4" Grid.Row="1" Content="Txt1" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="0" Grid.Row="2" Content="Txt7" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="1" Grid.Row="2" Content="Txt5" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="2" Grid.Row="2" Content="Txt2" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="3" Grid.Row="2" Content="Txt2" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="4" Grid.Row="2" Content="Txt2" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="2" Grid.Row="3" Content="Txt3" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="3" Grid.Row="3" Content="Txt3" HorizontalAlignment="Center" FontSize="36"/>
    <Label Grid.Column="4" Grid.Row="3" Content="Txt3" HorizontalAlignment="Center" FontSize="36"/>
</Grid>

输出如下所示：https://gyazo.com/b6768ab550ddac6685549c35e38b34e9

如果您想在所有 5 列上方居中显示标题，也可以使用 Grid.ColumnSpan 跨越网格的多列。

【讨论】：

【解决方案2】：

在您的 Grid 中使用 alignItems：alignItems="center"

<Grid container spacing={24} alignItems="center">

【讨论】：

【解决方案3】：

花了一些时间后，我想我做到了：这是代码框：https://codesandbox.io/s/ll507vypy7

代码：

const styles = theme => ({
root: {
    flexGrow: 1
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 50
  }
});

class TextFields extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <Grid container>
          <Grid item container xs={4}>
            <Grid item xs={12}>
              <Typography variant="subheading" gutterBottom color="primary">
                Grid1
              </Typography>
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
          </Grid>
          <Grid item container xs={4}>
            <Grid item xs={12}>
              <Typography variant="subheading" gutterBottom color="primary">
                Grid2
              </Typography>
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
          </Grid>
          <Grid container item xs={4}>
            <Grid item xs={12}>
              <Typography variant="subheading" gutterBottom color="primary">
                Grid3
              </Typography>
            </Grid>
            <Grid container item xs={12}>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
            </Grid>
            <Grid container item xs={12}>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
            </Grid>
            <Grid container item xs={12}>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
  }
}

PS 它是 MATERIAL-UI

【讨论】：