Bulma: Used tiles as in the documentation, there is no gap as expected

[jp06]

This is about Bulma.

Need help on managing gaps between tiles.

Overview of the problem

This is about the Bulma CSS framework or the docs or how I implemented tiles in a React app.

Description

I've installed the bulma with npm i bulma and I have import 'bulma/css/bulma.min.css'; on top of my App.js on a React app.

I used the tiles as in the snippets on the documentation. I've already used navbar and field and no issue on gaps so far, until using tiles.

Steps to Reproduce

1. I would just be putting here the code outputted on the DOM:

<section class="section">
    <div class="container">
        <div class="field is-grouped">
            <div class="control">
                <button class="button is-medium is-primary has-text-weight-semibold">Allocate</button>
            </div>
        </div>
        <div class="tile is-ancestor">
            <div class="tile is-parent">
                <div class="tile is-child box">
                    <p class="title">Paint (2)</p>
                    <p>Amount: 8 L</p>
                    <p>Nearest Expiry: December 25, 2018</p>
                </div>
                <div class="tile is-child box">
                    <p class="title">Resin (3)</p>
                    <p>Amount: 10 mL</p>
                    <p>Nearest Expiry: December 21, 2018</p>
                </div>
                <div class="tile is-child box">
                    <p class="title">Fiberglass (2)</p>
                    <p>Amount: 16 yd</p>
                    <p>Nearest Expiry: December 24, 2018</p>
                </div>
            </div>
        </div>
    </div>
</section>

Expected behavior

Expected having gaps as in the docs.

Actual behavior

[mobayen]

each .is-child needs its own .is-paranet element, except it is a .is-vertical
so your code would be something like this:

<div class="tile is-ancestor">
    <div class="tile is-parent">
        <div class="tile is-child box">
            <p class="title">Paint (2)</p>
            <p>Amount: 8 L</p>
            <p>Nearest Expiry: December 25, 2018</p>
        </div>
    </div>
    <div class="tile is-parent">
        <div class="tile is-child box">
            <p class="title">Resin (3)</p>
            <p>Amount: 10 mL</p>
            <p>Nearest Expiry: December 21, 2018</p>
        </div>
    </div>
    <div class="tile is-parent">
        <div class="tile is-child box">
            <p class="title">Fiberglass (2)</p>
            <p>Amount: 16 yd</p>
            <p>Nearest Expiry: December 24, 2018</p>
        </div>
    </div>
</div>

[jp06]

Haven't tried wrapping each .is-child with its own .is-parent element, I'll keep that in mind for next time.

Thank you very much! Just in time for Christmas.