Html 语义UI项堆叠而不是分散在行中

我将语义UI与rails一起使用，并尝试将4个项目分散在一行中，但它们是垂直堆叠在彼此的顶部

这样使用：

<div class="ui grid">
    <div class="row">
      <% @posts.each do |post| %>
       <div class="four wide column">
         <div class="column">
           <div class="ui card">
              <div class="image"><%= link_to (image_tag avatar.post, post_path(post), class: "ui tiny circular centered image"  %>
              </div>

         <div class="content">
          <a class="header"><%= post.instagram_username %></a>
          <div class="extra content">
          <p><small><%= raw post.tags.map(&:name).map { |t| link_to t, tag_path(t),class: "ui primary basic mini button" }.join %></small</p></div>
          </div>
         </div>
      </div>
      <% end %>
 </div>



或

只是为了确保使用这个，应该是水平的

<div class="ui grid"> 
 <div class="four wide column"></div> 
 <div class="four wide column"></div> 
 <div class="four wide column"></div> 
 <div class="four wide column"></div> 
</div>


你有什么CSS要显示吗？@ultrarun我使用默认的CSS来表示语义，我没有添加任何自定义的CSS请查看你的HTML标记并正确地将它们全部关闭：
small
标记没有真正关闭，你的
div
标记不匹配。你有没有考虑过使用
class=“ui四张卡”
而不是网格？我刚刚尝试过这个方法，但是这些项仍然是叠在一起的。在类“four wide column”之后，通过注释整个div来调试它，以确保其他div没有造成任何混乱。如果不起作用，则注释row类。在这之后让我知道：）我已经用样本结构更新了我的以上答案。我用你提供的格式重新做了所有的事情，结果发现我添加了一个额外的结束div，把一切都搞砸了。谢谢你的帮助
<div class="ui grid"> 
 <div class="four wide column"></div> 
 <div class="four wide column"></div> 
 <div class="four wide column"></div> 
 <div class="four wide column"></div> 
</div>