Material-ui: [网格] 自动高度调整（响应式布局）

我有一种感觉，你想要完成的事情可以在用户空间上实现并针对一个利基市场，出于这些原因，我正在关闭这个问题。 让我们保持代码库简单。

我完全理解代码的基础仍然很简单，但材料规范声明： “来自单列格式的元素可能会回流以各种组合填充内容区域。”

但目前我能用 Grid 做的最好的事情是：

然后我认真地认为代码可以在具有功能的同时保持简单

谢谢，

PS：如果您知道一个 SMALL 组件可以产生与规范相同的结果，请告诉我。
（但我仍然认为在 Material UI 中集成对每个人都是有益的）

也许您正在寻找砖石库： https :

是的，这是一个好主意，同时等待 Material UI 中的本机集成，_{^{如果有朝一日 :)}}

PS：可以考虑重新开issue吗？

谢谢，

如果您需要帮助集成此功能，我想您可以在此处获取对Google Material Framework 的CSS 代码的支持

Material ui 无疑是最好的 React 组件集！

我不认为 getmdl 可以做到，我还没有检查，但我很确定您提供的链接是一个静态示例。 对于动态内容，我已经看到它仅适用于angular material 2 grid list或angular material 1 grid list 。 但他们使用复杂的算法......

是的，你是对的，但我从未指定仪表板的内容不应该是静态的 😄
显然，材料角度可以很好地完成网格不能做的事情......但是逻辑太复杂了！

实际上，据我所知，您已经可以使用 Grid xs 、 sm 、 md等的响应断点来实现。
如果您需要“100%”自动的东西，那么砌体库将更适合您的需要，但它超出了项目的范围。

你好@oliviertassinari ，
但是网格的材料规格？ 正如我在之前的评论中解释的那样？

我不明白如何使用断点实现它，网格不允许修改其大小！ 问题就在这里！

为什么第二张音乐卡不能粘在“aperçu”卡上？ 这与材料规范相反。

更一般地说，为什么网格不让用户按照自己的意愿放置卡片？

我希望你能理解我的要求，并且你会重新打开这个问题
并且真诚地，我不认为这是在项目之外，material.angular 集成了它。

• 您可以使用withWidth()高阶组件来更改不同断点的网格结构。 网格是 flexbox 模型的一个纤薄包装器，这个布局模型允许做的任何事情都可以通过 Grid 组件实现。
• 此外，您可以更改从行到列的方向以获得所需的行为。

嗯，我想我可以应付，但是如果可以在文档中添加这个例子供初学者问同样的问题吗？
我需要考虑如何实施我的仪表板...感谢您的帮助

嘿，我也想要这个功能，我不明白如何按照建议来实现。 HelloEdit，你设法让它工作了吗？ 你能举个例子吗？ 我认为这个用例应该在文档中。

嘿，我没有找到解决方案（使用像 masonry 这样的外部库可以工作）但没有本地解决方案。 我仍然保持我的想法，在本地实现这个功能！

我们最终创建了 2 列并均匀地拆分数据。 问题是，如果其中一列最终包含所有更大的卡片，则一侧可能比另一侧长得多。

我同意@HelloEdit 。 这是一个大问题，不包括在网格中。 一开始我觉得使用 Material-UI 网格有点蹩脚，因为为什么我要使用一个在大多数时候看起来很糟糕并且有丑陋间隙的网格并且不遵循 Material-UI 规范？

我的应用程序中没有一个网格，我希望它像 Material-UI 网格那样工作，而且您的网格文档页面过于简单，无法表明您的网格是如何工作的，所以我没有意识到这一点在我的应用程序中发现它之前是网格的一个“功能”。

我在一个例子中做了与@marco-silva0000 相同的事情，但这是一个明显的黑客行为，除非你的物品尺寸都差不多，否则它的底部看起来也很丑陋。

请重新打开@HelloEdit我同意这是一个大问题，提供的“解决方案”并不令人满意。
此外，如前所述，它不遵循材料准则。

我知道你有很多工作，你的库很棒，但是如果你想实现一个完全响应式的布局，这个特定的点真的很成问题。

@oliviertassinari潜在的布局示例...

这方面有什么进展吗？

网格rowHeight属性可以手动设置或默认为 1:1。 如果我们显示一张内部循环动态数据的卡片，则不会调整高度。

1. 情况 1，如果卡片可以容纳 5 个数据并且只有两个数据存在，则调整卡片高度，但网格高度保持为 1:1。
2. 情况 2，如果卡可以容纳 5 个值，但存在 7 个值，则剩余的数据将被删除并且永远不会显示在屏幕上。

如果有任何解决此问题的方法，请举例说明？ 我投票支持本地人。 我认为这是 Grid 组件的基本功能。

这样的事情会是你想要的吗： https :
它由 CSS 网格提供支持，因此不能在任何地方使用： https :

@joshwooding根据我在 iPad 上看到的内容，看起来非常好！ 明天会在桌面上检查。

检查桌面后编辑，此解决方案有几个问题：

1. 这将需要基于断点做出响应，就像网格现在一样。
2. 我向 MacCard 组件添加了几个 Typography 元素（以模拟可变高度卡片，这是我的用例），使其更高。 之后，结果在行之间有这些不需要的空格。 因此，这毕竟不起作用。 截图如下：
   

Grid 中的 Masonry 布局支持会很棒👍，理论上使用 JS 可以工作但不理想

css 网格布局不适用于此，请参阅： https :

临时解决方案将根据需要创建列并传播它们
例如
这里我有两列，如果它们的键是奇数，则将它们分开
和 1 个主网格，一列用于移动
我在 smDown 上隐藏了第一个
并在 mdUp 中隐藏主要内容

有这方面的消息吗？

当使用 flexbox 更容易时，肯定会有问题。

@CloudNineK Flexbox 没有解决这个问题（网格是基于 flexbox 的）。 如果您希望在不同数量的列之间均匀分布内容，则需要使用 masonary 库。

我只想说，我也希望从 MUI 中看到某种砌体功能。 也许不会更改 MuiGrid 以支持该功能，但可能会添加一个支持它的新组件。 因此，我绘制了一个粗略的组件来包裹 MuiGrid 以获得砌体效果。 我希望这可能是创建组件的开始？

这是给那些感兴趣的人： https :

当然也有问题。 它目前的工作方式是采用预定义的断点（我从 theme.breakpoints.values 中提取），并根据它计算要创建的列数。 我知道这不是 MUI 的任何组件的行为方式，但在这一点上，我真的只能使用此方法设置整个列的宽度。

@weiluntong这也是一个可能的解决方案，但我认为它不优雅
也许有人应该分叉实验室并为此作为新组件提出公关或提案

@nikandlv我完全同意你的看法。 目前，这件事处于一种不确定状态，既不是 MUI，也不是 Masonry 布局。 我非常乐意创建一个组件并进行 PR。 事实上，这就是我希望的最终目标，但我创建了沙箱，因为我不确定我从哪里开始。 再次，我希望这可能是一个开始？ 还是我完全不了解组件的基本结构？ 我很乐意让我前进。

@weiluntong我认为您对组件的使用是正确的，它可能需要做更多的工作。 但是，您应该询问维护者是希望将其作为 MUI 的一部分还是作为您可以发布的库
正如https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md所说

提交新组件时，请将其添加到实验室。

https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab

我们需要在这个问题上获得更多的赞成票才能考虑解决这个问题。

如果@weiluntong你仍然觉得你有时间准备一个提案，我可能会投票给一个单独的专用砌体组件。 可能是维护和使用最简单的选择。

我正在使用react-virtualized Masonry组件。 但是， react-virtualized不适用于最新的babel和core-js 。 看起来它的继任者react-window也不太可能包含Masonry组件。 也许react-virtualized Masonry组件可以更新并采用到material-ui ？

我不介意将提案放在一起，以便我们可以巩固赞成票。 有我应该使用的提案模板吗？

@weiluntong我猜是https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md你应该提交一个问题并在那里描述组件请求并要求投票

@weiluntong创建新问题时有一个模板。

如果我遗漏了什么，请纠正我，但我能够通过从堆栈溢出中应用此解决方案来解决似乎是这个确切问题的问题：
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

事实并非如此

关闭 #17000