In this quick tip, we’re going to use Bulma, a popular Flexbox-based CSS framework by Jeremy Thomas, to build a responsive blog layout.
As usual, to get an initial idea of what we’ll be creating, take a look at the associated Codepen demo (check out the larger version for a better experience):
Getting Started With Bulma
Bulma requires just one single CSS file. You can grab a copy of this file by visiting its GitHub page, through a package manager (e.g. npm), or a CDN (e.g. cdnjs).
For this tutorial, we’ll choose the last option. So, we place a link to the required file within the <head> of our HTML document:
Now, we’re ready to start building the blog layout!
Building the Layout
Our grid will have a maximum width and will be centered horizontally. To accomplish this, we use Bulma’s section and container helper classes:
1
<sectionclass="section">
2
<divclass="container">
3
<!-- grid here -->
4
</div>
5
</section>
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:
1
tile is-ancestor
2
|
3
└───tile is-parent
4
|
5
└───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.
Based on what we’ve discussed above, here’s the required markup:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-parent">
3
<articleclass="tile is-child green post">
4
<!-- content here -->
5
</article>
6
</div>
7
8
<divclass="tile is-6 is-parent">
9
<articleclass="tile is-child pink post">
10
<!-- content here -->
11
</article>
12
</div>
13
14
<divclass="tile is-vertical is-parent">
15
<articleclass="tile is-child blue post">
16
<!-- content here -->
17
</article>
18
<articleclass="tile is-child gold post">
19
<!-- content here -->
20
</article>
21
</div>
22
</div>
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.
Here’s the related markup:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-6 is-parent">
3
<articleclass="tile is-child gray post">
4
<!-- content here -->
5
</article>
6
</div>
7
8
<divclass="tile is-vertical is-parent">
9
<articleclass="tile is-child blue post">
10
<!-- content here -->
11
</article>
12
<articleclass="tile is-child gold post">
13
<!-- content here -->
14
</article>
15
</div>
16
17
<divclass="tile is-parent">
18
<articleclass="tile is-child red post">
19
<!-- content here -->
20
</article>
21
</div>
22
</div>
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.
The markup for this case is as follows:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-8 is-vertical">
3
4
<divclass="tile">
5
<divclass="tile is-parent">
6
<articleclass="tile is-child blue post">
7
<!-- content here -->
8
</article>
9
</div>
10
<divclass="tile is-parent">
11
<articleclass="tile is-child gray post">
12
<!-- content here -->
13
</article>
14
</div>
15
<divclass="tile is-parent">
16
<articleclass="tile is-child red post">
17
<!-- content here -->
18
</article>
19
</div>
20
</div>
21
22
<divclass="tile">
23
<divclass="tile is-parent">
24
<articleclass="tile is-child pink post">
25
<!-- content here -->
26
</article>
27
</div>
28
<divclass="tile is-parent">
29
<articleclass="tile is-child gold post">
30
<!-- content here -->
31
</article>
32
</div>
33
</div>
34
35
</div><!-- /is-8 -->
36
37
<divclass="tile is-parent">
38
<articleclass="tile is-child green post">
39
<!-- content here -->
40
</article>
41
</div>
42
43
</div>
As you’ll see from the code above, the nested hierarchy looks like this:
1
tile is-ancestor
2
|
3
├───tile is-8 is-vertical
4
| |
5
| ├───tile /*Extra class for IE*/
6
| | |
7
| | ├───tile is-parent
8
| | | └───tile is-child
9
| | |
10
| | ├───tile is-parent
11
| | | └───tile is-child
12
| | |
13
| | └───tile is-parent
14
| | └───tile is-child
15
| |
16
| └───tile /*Extra class for IE*/
17
| |
18
| ├───tile is-parent
19
| | └───tile is-child
20
| |
21
| └───tile is-parent
22
| └───tile is-child
23
|
24
└───tile is-parent
25
└───tile is-child
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.
George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (Tuts+, SitePoint, LottieFiles, Scotch, Awwwards). He loves anything related to the Web and he is addicted to learning new technologies every day.
