Learning how Bulma.io implements grids

Bulma.io (Bulma) is an opinionated, customizable CSS framework with ready-to-use components. It is Sass-based and offers dozens of variables to adjust to our liking. Some components include delete buttons with cross icons, colored tag lists, card components, menus, modals, and form fields.

We can see the landing page of Bulma’s website in the following screenshot:

Figure 8.10 – Bulma’s landing page

Bulma’s grid system is called columns and consists of two building blocks: a column container with the columns class and single column elements with the column class. The columns are auto-sized by default. For example, a four-column layout can be achieved with the following code snippet:

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
 ...