网格和自动调整大小单元格中的Collectionview流布局

Question

我需要在Collection View中以3xn的形式实现网格布局。连续3个单元，并且可能有n行。

CollectionView单元格有一个正方形图像和下面的两个标签。标签向左对齐。

CollectionView应该遵循要求：

1. CollectionView单元必须具有相同的宽度，但可以具有不同的高度。 （取决于标签）
2. 单元格应与collectionView的左上方对齐。也就是说，一行中的所有单元格应从相同的y点开始。并且如果连续有一个单元格，则应与最左侧对齐。

我设法得到了布局，但是它有一些缺陷。

1. 每行单元格之间有一些多余的空间。
2. 添加更多部分和/或补充视图时，布局不再起作用。

我将此流程布局与一些技巧配合使用

let segment = ["", "to", "capitalize", "the","second","word","in","the","array"];

if(segment.length >=2){
   segment[1] = segment[1][0].toUpperCase() + segment[1].substr(1);
}

console.log(segment );

这是一张说明布局的图像。如果有人可以推荐任何替代解决方案或更好的解决方案，那将是很好的。