How to make tiles wrap with Bulma CSS

Question

I'm using the Bulma CSS framework with a Rails app. I have a long list of items and would like to display them in tiles. However, the tiles run off the screen instead of wrapping to the next line.

The Bulma Documentation doesn't address this issue. Since I am creating the tiles dynamically from a variable-length list, explicit nesting as described in their docs isn't so easy and I'd rather have it cleanly wrap to the next line.

Here's what my code basically looks like:

<div class="tile is-ancestor">   <div class="tile is-parent">     <% @my_list.each do |item| %>         <div class="tile is-child box">           <p><%= item %></p>         </div>     <% end %>   </div> </div> 

Since Bulma is based on flexbox, I would think there is some equivalent to flex-wrap: wrap;, but I couldn't find this option yet.

---

Update: It's possible to add the style flex-wrap: wrap;to the parent-container, but is there a Bulma-integrated class flag?

Answer 1

It seems that there is currently no class-flag in Bulma addressing this directly.

However, since Bulma is based on flexbox, it is possible to add the style flex-wrap: wrap; to the parent container to achieve the desired outcome.