Grid

Grid layout is consest of two main elements:

.grid : Container that wrap columns

.columns: Elements that hold your conent

Each column will have an equal width, no matter the number of columns.

If you want a specific for column you can choses between 12 sizes, there are size classes for each division:

If you want all column to be the same width you can add modifier on gird element, to apply to all nested columns.`

You can control columns arrangend in the .grid using display modifiers

.is-shrink: Columns take only the size of their content

.is-fit: Removes gutters between columns

.is-vertical: Arrange columns in a vertical order

.is-top : Align columns to the top of the grid container

.is-middle : Align columns to vertically middle of the grid container

.is-bottom : Align columns to the middle of the grid container