Bulma - Tiles not breaking onto the next line

Question

I'm trying to create multiline tiles for a pintrest type layout. The problem I'm having is the tiles are placed horizontally and go off the page. I need them to wrap onto the next line. I can't seem to find anything in the docs:

Here's my code (copied from the docs). The items will be pragmatically inserted.

<div class="tile is-ancestor">
    <div class="tile is-parent">
      <div class="tile is-child card is-6">
        <p class="title">One</p>
      </div>
      <div class="tile is-child card is-6">
        <p class="title">Two</p>
      </div>
      <div class="tile is-child card is-6">
        <p class="title">Three</p>
      </div>
      <div class="tile is-child card is-6">
        <p class="title">Four</p>
      </div>
    </div>
  </div>

I've tried is-multiline but it doesn't seem to work.

Answer 1

The reason for your issue is that you are assigning is-6 for 4 elements resulting to the total of 24 columns while the doc says that it is a 12 column grid. So, it is overflowing.

I don't think Tile is the solution as it is using flex and what you want is to be able to control the overflow.

Solution:

1. Simply create a div and show your 'tiles' as a list with display: inline-block. Give it a width and height you want. It will automatically push the 'tiles' to another line.
2. Remove is-6 which will all n number of your tiles to display in that same line.