首先将每一行 Package 在一个容器中，比如.grid-row，它将包含您之前分配给.grid的那些Flexbox属性。
现在为每个单元格设置flex-grow属性，值可以是任何值，只要每行的值的ratio正确即可。您可以简单地将其设置为单元格的宽度（不带单位），这样第一个单元格将具有flex-grow: 190。另外，确保在所有.grid-item上将flex-shrink设置为1，以避免此flexbug。
要想让图片一直伸展，就从.grid-in中删除所有inline-block的内容;要想让图片按比例增加高度，就从.grid-in中删除width: 190px，而不是裁剪成190px。
最后，为了隔开它们，在这种情况下，最好在.grid-item上使用padding: 1px，而不是在.grid-in上使用margin: 1px。
因为这个演示没有被足够的简化，为了清晰起见我对它进行了清理。希望你知道如何在你的原始代码中实现它。
第一个

我偶然发现了这个问题，不幸的是无法解决它使用Flexbox.答案可能会让你感到惊讶，但我发现这里是一个适合我的解决方案是一个表，是的，你听到我的权利，一个<table>！
请记住以下几个限制：
1.您应该知道每一行上所需的单元格/列数。
1.如果每一行的列宽不同，则每行都需要一个表元素。（'member 2000 s？）
第一个
您还可以使用其他html元素，并使用css模拟表的行为。
display: table | table-row | table-cell