A simple way to build responsive columns
To build a grid, just:
- Add a
- Add as many
column elements as you want
Each column will have an equal width, no matter the number of columns.
If you want to change the size of a single column, you can use one the following classes:
The other columns will fill up the remaining space automatically.
As the grid can be divided into 12 columns, there are size classes for each division:
While you can use empty columns (like
<div class="column"></div>) to create horizontal space around
.column elements, you can also use offset modifiers like
By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
If you want columns to work on mobile too, just add the
is-mobile modifier on the
If you only want columns on desktop, just use the
is-desktop modifier on the
Different sizes per breakpoint
You can define a column size for each viewport size: mobile, tablet, and desktop.
You can nest columns to have more flexibility in your design. You only need to follow this structure:
columns: top-level columns container
The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.
Whenever you want to start a new line, you can close a
columns container and start a new one. But you can also add the
is-multiline modifier and add more column elements that would fit in a single row.
If you want to remove the space between the columns, add the
is-gapless modifier on the
You can combine it with the
If you want a column to only take the space it needs, use the
is-narrow modifier. The other column(s) will fill up the remaining space.
This column is only 200px wide.
This column will take up the remaining space available.
As for the size modifiers, you can have narrow columns for different breakpoints: