Bulma - why all columns are on one line?
If you want columns to wrap you need to add the .is-multiline modifier to the .columns class. More information here
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" /><div class='columns is-multiline'> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div> <div class='column is-4'> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> </div> </div> </div></div>