如何创建水平网格

Question

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

现在，组件正在呈现如下内容：

我想这样渲染它们：

到目前为止，我已经尝试过此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>

但是没有运气。有什么建议可以实现吗？ 谢谢。

Answer 1

材料界面basic-grid

<Grid container>
 <Grid item xs={4}>
    Your Content No.23
 </Grid>
 <Grid item xs={4}>
    Your Content No.11
 </Grid>
 <Grid item xs={4}>
    Your Content No.9
 </Grid>
</Grid>

Answer 2

添加方向=“行”

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

请参阅material-ui文档 enter link description here

Answer 3

您只需使用网格和填充/边距即可完成操作。

在codeandbox上查看我的示例：

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

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

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

希望这会有所帮助。