Python 语义用户界面-移动设备、平板电脑和计算机上具有可变列数的网格

我有一些用户图像，它们根据网格中的列数调整大小

现在我有：

<div class="ui ten column grid">
  {% for user in event.participants.all %}
  <div class="center aligned column">
    <a href="{% url 'profiles:profile' user.username %}"><img class="ui circular small centered image" src="{{ user.profile.get_avatar_url }}"></a>
    <p>{{ user.username }}</p>
  </div>
  {% endfor %}
</div>

{event.particients.all%中的用户为%1}
{{user.username}

{%endfor%}

除了在小型设备上，由于“十列网格”应用于移动设备和计算机，轮廓图像的大小显著减小之外，其他一切都可以正常工作

我知道，对于网格内的列，可以声明：

<div class="sixteen wide mobile twelve wide tablet ten wide computer column">

但如果我将其用于网格本身，它将不起作用：

<div class="ui sixteen wide mobile twelve wide tablet ten wide computer column grid">

---

如何创建在移动设备、平板电脑和计算机上具有不同列数的网格？

必须在每个

列上声明列大小。不在网格上

您还需要
.stackable
类来包装列

请参阅此JSFiddle:
必须在每个
.column
上声明列大小。不在网格上

您还需要
.stackable
类来包装列

请参阅此JSFiddle:
谢谢您的回答。不幸的是，这个解决方案不适用于我，因为如果要使网格可堆叠，配置文件图像将占用一行，另一个图像将位于下一行，依此类推。我想在移动设备上一行显示七张图片谢谢你的回答。不幸的是，这个解决方案不适用于我，因为如果要使网格可堆叠，配置文件图像将占用一行，另一个图像将位于下一行，依此类推。我希望在移动设备上一行显示七张图片