Fatal编程技术网

Javascript 很好地格式化网格

javascript reactjs grid

Javascript 很好地格式化网格,javascript,reactjs,grid,jsx,Javascript,Reactjs,Grid,Jsx,我试图以一种“直观”的方式显示数据，但很难正确构建数据 我想格式化页面如下：第一个网格包含3个文本字段，一个在另一个下面，上面有适当的标题。第二个网格与其他3个字段相同，第三个网格包含7个文本字段，我想在第一列中显示->3，第二列中显示2，最后一列中显示2，都在同一标题下 如果我把最后7个字段放在同一个网格下，它们都出现在同一列中。现在它几乎可以工作了，但只有前3个文本字段在标题下方正确地加了边距，另外4个显示在不同的边距上 这是我的代码：（如果有人有改进显示器的想法，我非常乐意听到） 现在是:

我试图以一种“直观”的方式显示数据，但很难正确构建数据

我想格式化页面如下：第一个网格包含3个文本字段，一个在另一个下面，上面有适当的标题。第二个网格与其他3个字段相同，第三个网格包含7个文本字段，我想在第一列中显示->3，第二列中显示2，最后一列中显示2，都在同一标题下

如果我把最后7个字段放在同一个网格下，它们都出现在同一列中。现在它几乎可以工作了，但只有前3个文本字段在标题下方正确地加了边距，另外4个显示在不同的边距上

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

现在是:

       Txt6   Txt4  Title3          Title2       Title1
       Txt7   Txt5   Txt1          Txt1         Txt1
                     Txt2          Txt2         Txt2
                     Txt3          Txt3         Txt3
我不确定这是否是基于您想要的内容构建网格的最佳方式，但我会这样做：

<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>
输出如下所示：

如果要将标题居中放置在所有5列的上方，还可以使用
Grid.ColumnSpan
跨越网格的多个列。

在网格中使用alignItems:
alignItems=“center”

花了一段时间后，我想我做到了： 以下是代码沙盒：

代码：

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>
    );
  }
}

constyles=theme=>({
根目录：{
flexGrow:1
},
文本字段：{
marginLeft:theme.spating.unit，
marginRight:theme.space.unit，
宽度：50
}
});
类TextFields扩展了React.Component{
render（）{
const{classes}=this.props；
返回(
网格1
网格2
网格3
);
}
}
PS这是材质-UI

您能将设计附在这里吗？当前显示的图片@SakhiMansoorNo我是说想要的output@SakhiMansoorUpdatedI在下面添加了一个答案。希望这有帮助 
<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>

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

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>
    );
  }
}