具有语义UI的Rect中的条件布局

Question

试图在React-Semantic UI中实现某些目标，但无法使其正常工作：

我正在垂直列表中显示实体列表（比方说事件）。

• 每个实体都有一系列关联的化身（假设参与者）。
• 对于每个事件，我想显示一排完全适合列表宽度的化身（因此，对于任何显示尺寸，不超过一排化身），然后有一个“ + N更多”化身（行末尾的“特殊”头像。
• 每个实体列表项都使用Grid组件进行布局。

例如，并取决于最终化身的大小：

• 对于移动显示：显示2个头像+特殊头像（如果超过2个）
• 用于平板电脑显示：显示5个头像+特殊头像（如果超过5个）
• 对于台式机显示：显示15个头像+特殊头像（如果超过15个）

我基本上想做的是让Grid.Row显示动态的列数。无论如何，如果没有显式的媒体查询和窗口大小的事件侦听器，是否可以实现这一目标？

尝试使用语义设备可见性功能，但是，如果我理解正确，将需要我计算适合特定屏幕尺寸的确切列数，然后开始使用以下排列：

<Grid.Column only='tablet computer large screen wide screen>

如果我需要手动计算所有内容，也许最好使用水平List组件？