如何创建水平网格答案

【问题标题】：How to create horizontal grid如何创建水平网格
【发布时间】：2019-12-20 09:52:50
【问题描述】：

我正在渲染一堆 Input 组件，我想使用来自 material-ui 的某种 Grid 水平并排显示它们。

现在组件渲染如下：

我想像这样渲染它们：

到目前为止，我已经尝试过这个Grid：

<div style={{ row: 'horizontal' }}>
      <Grid item xs={4}>
            <Grid container justify="center" spacing={24}>
                  <Grid key={index} item>
                        <GalleryInput label="image" source={`${source}[${index}].image`} />
                        <br></br>
                        <TextInput label="desc" source={`${source}[${index}].desc`} />
                        {editable && <ButtonHelper icon={<RemoveIcon />} onClick={handleRemove(index)} className={classes.right} />}
                    </Grid>
             </Grid>
       </Grid>
</div>

但没有运气。有什么建议我怎样才能做到这一点？谢谢。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

添加方向=“行”

<Grid container justify="center"  direction="row" spacing={24}>

参考material-ui文档 enter link description here

【讨论】：

很遗憾，这并不能解决我的问题。
在父网格中添加这个而不是在子网格中

【解决方案2】：

您可以简单地使用网格和填充/边距。

查看我在代码框上的示例：

https://codesandbox.io/s/trusting-matsumoto-w83fc?fontsize=14&hidenavigation=1&theme=dark

material-ui 上的文档也很有帮助：

https://material-ui.com/components/grid/#spacing

希望这会有所帮助。

【讨论】：