React - 如何在方形布局中放置 4 个视频 div？答案

【问题标题】：React - How do I place 4 video divs in a square layout?React - 如何在方形布局中放置 4 个视频 div？
【发布时间】：2021-05-05 22:37:34
【问题描述】：

我正在尝试组合一个基本的前端全息金字塔 web 应用程序，该应用程序可以拍摄视频并将其显示在 4 个通常彼此等距的方形窗口中。下面是一个例子：

我继续设置了一个模仿我想要的基本布局（浏览器中的移动视图）：

我现在正尝试用来自react-player 的视频组件替换文字，但是当我这样做时，视频不会对齐和改变大小：

我不确定如何最好地纠正这个问题。我这里有一个代码沙箱：

我所做的只是将“TOP”、“BOTTOM”等替换为<ReactPlayer />。不知道如何最好地纠正这个问题。感谢一些指导和/或帮助。

【问题讨论】：

【解决方案1】：

Grid 可能是你的朋友。

去查找 MDN 文档。他们有非常直接的例子。

【讨论】：

这没有多大帮助。我刚刚使用您推荐的网格文档测试了 react-player，我得到了类似的结果，其中一些组件被扭曲或改变大小：codesandbox.io/s/gridtest-i1m1c?file=/src/App.js。