如何创建每行 3 个项目的水平网格答案

【问题标题】：How to create horizontal grid with 3 items per row如何创建每行 3 个项目的水平网格
【发布时间】：2019-10-17 12:26:07
【问题描述】：

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

现在组件渲染如下：

我想像这样渲染它们：

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

render() {
        const { multipleVideoSource } = this.state;
        return (
            multipleVideoSource !== null ?
            multipleVideoSource.map(src => (
                <div style={{ row: 'horizontal' }}>
                    <Grid container spacing={24}>
                        <Grid item xs={4}>
                            <Player key={src} height={500} fluid={false}>
                                <ControlBar autoHide={false} className="my-class" />
                                <BigPlayButton position="center" />
                                <HLSSource isVideoChild src={src} />
                            </Player>
                        </Grid>
                    </Grid>
                </div>
            ))
            : "Only one video"
        );
    };

但没有运气。任何想法如何解决这个问题？

提前谢谢你。

【问题讨论】：

你在使用 ReactJS 吗？如果是这样，请将其添加为标签。
@Rojo 我是，已添加标签。
容器需要在循环之外，这样你就只有一个容器（目前每个项目都有一个单独的容器）。
@RyanCogswell 解决了这个问题，非常感谢。
将容器设置为 flex 然后设置 flex-direction: row 我想应该会有所帮助。

标签： javascript css reactjs grid material-ui

【解决方案1】：

试试下面的代码：

render() {
    const { multipleVideoSource } = this.state;

    const BunchOfPlayer = multipleVideoSource.map(src => (                           
          <Grid item xs={4}>
            <Player key={src} height={500} fluid={false}>
               <ControlBar autoHide={false} className="my-class" />
               <BigPlayButton position="center" />
               <HLSSource isVideoChild src={src} />
            </Player>
          </Grid>));

    return (
        multipleVideoSource !== null ?
          <Grid container spacing={24}>        
             {BunchOfPlayer}        
          </Grid>
        : "Only one video"
   );
};

【讨论】：

【解决方案2】：

如果您使用“material-ui”只是为了导入一个组件，那么我是否建议您使用您自己的 CSS，这可能足够简单？如果您已经控制了播放器元素及其容器的宽度，您可以简单地在 div 容器上添加“display:inline-block”：

<div style={{ display: 'inline-block' }}>

这可能会导致响应能力出现问题，在这种情况下，您可能需要查看一些 flex 样式，以便更好地控制。它包含更多 CSS，但会提供一些更具可扩展性和响应性的解决方案。

基本上，您希望保留一个容器，以便您的 map() 中的所有内容都将其元素返回到其中。这个容器的样式看起来像这样：

render() {
  return (
    <div style={{ display:'flex', justifyContent: 'space-between'}}>
      {renderPlayers()}
    </div>
  )
};

renderPlayers() {
        const { multipleVideoSource } = this.state;
        return (
            multipleVideoSource !== null ?
            multipleVideoSource.map(src => (
                <div> {/* maybe keep for flex-item style? Otherwise, not necessary */}
                  <Player key={src} height={500} fluid={false}>
                    <ControlBar autoHide={false} className="my-class" />
                    <BigPlayButton position="center" />
                    <HLSSource isVideoChild src={src} />
                  </Player>
                </div>
            ))
            : "Only one video"
        );
    };

Flex 默认为 'row' 的 'flexDirection' 和 'nowrap' 的 'flexWrap'，因此您不必为水平网格设置这些。（除非您希望它为较小的设备包装。）

您还可以为每个孩子设置样式，并在 https://the-echoplex.net/flexyboxes/ 等网站上使用不同的 Flexbox 样式

我希望这会有所帮助！

【讨论】：