On small screens all articles should be stacked vertically, like this:

By default Bulma, which is designed mobile-first, places the articles on top of each other under viewport widths of 769px. All we have to do is to build the blog layout when the viewport exceeds 768px.

To do that, we need only one element: the tile. As you’ll see in a moment, the trick is to nest multiple tile elements.

With that in mind, let’s have a closer look at the desired desktop layout. As you can see from the following visualization, it comprises three rows:

For each row, Bulma expects at least the following nested hierarchy:

tile is-ancestor
|
└───tile is-parent
|
└───tile is-child

Let’s explain that:

We start with a top-level tile which contains all the other tiles.

Within it, we add tiles which are distributed on the horizontal axis. Plus, based on a twelve column grid, we can set a specific width for these elements. This is possible by using the is-* classes where * is a number between 1 and 12. For instance, a tile with the is-6 class will occupy 50% of the horizontal space.

To stack tiles vertically, we use the is-vertical class.

Once we want to add content to a tile, we assign the is-child class to it and the is-parent class to the parent tile.

At this point we’re ready to put this theory into practice.

Row #1

The first row contains three columns. The first and third columns occupy one-fourth of the row’s width, while the second takes up one half of the row’s width. In addition, the third column consists of two child columns.

Notice that we define a specific width only for the second column via the is-6 class. Of course, if we want, we can add the is-3 class to the first and third columns as well. But this isn’t needed because both columns grow (they have flex-grow: 1) to share the remaining horizontal space.

Moreover, just for styling, we assign a few custom classes to each article. And for simplicity, we omit the articles’ contents.

Row #2

Similar to the first row, the second row contains three columns. The first one occupies one half of the row’s width, while the second and third take up one quarter of the row’s width. Furthermore, the second column includes two child columns.

Row #3

The third row is a bit more complicated; here we have two columns. The first is twice as large, relative to the second. Within the first column, we have two sub-rows. The first sub-row contains three equal-sized columns, while the second sub-row includes two equal-sized columns.

If you want to get a better idea of how the tile element works, be sure to check out the documentation as well as use the developer tools of your favorite browser to inspect the associated classes.

Browser Support

Nowadays Flexbox has really great support, and our blog layout should therefore work in all modern browsers.

However, while I was testing the page in different browsers, I found that IE 11 didn’t produce the desired result. Here’s what I was seeing:

On the other hand, testing with Microsoft Edge I didn’t encounter these issues. Perhaps it’s some kind of bug with the latest versions of IE. Anyhow, I tried to see if there was any quick fix which would avoid these problems.

I solved it by adding flex-basis: auto to the articles and the top-level tiles of the is-vertical tile of the third row (see previous hierarchy).

Again, this is a quick solution that seems to work for this particular example. For your own implementations, you may have to make some other changes in your code.

Conclusion

In this quick tip, we learned how to build a responsive blog grid with Bulma, a framework built on top of Flexbox.

Have you ever tried Bulma in any of your projects? What do you think of it? Share your experiences in the comments below.