A grid consists of a specific set of alignment relationships that guides the distribution of elements in a page. It has 3 important elements:

1. Columns
2. Gutters
3. Margins

Columns

Content is placed in the areas of the screen that contain columns.

Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. The number of columns displayed in the grid is determined by the screen size.

Gutters

Gutters are the spaces between columns. They separate content.

Gutter widths are fixed values at each breakpoint range. Wider gutters are more appropriate for larger screens, as they create more whitespace between columns.

Margins

Margins are the space between content and the left and right edges.

Margin widths are defined as fixed values at each breakpoint range. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content.

We use a grid system of 12 columns to organize layout and content on a page.

For this first release, we are using Bulma's grid. Bulma is a free, open source CSS framework based on Flexbox. It's responsive and modular, making it possible for us to import only the styles related to the grid.

Here are the important parts of Bulma's grid used on Confetti.

Columns

Bulma implements a column layout built with CSS Flexbox to create responsive interfaces.

To start it only requires a columns container and columns children. You can add add as many columns as you want, but is recommended to stick with 12 columns

By default, each column will have an equal width, no matter the number of columns.

You can change size, nest columns, define offset, how they look on different sizes and more. Check Bulma's documentation to learn how.

Container

Besides the columns, the container is another important element to define layout.

It is a simple utility element that allows you to center content on larger viewports. Using the class container on a div will limit its width and center it horizontally.

This is how Bulma sets max-width as default:

Example

For more details, check Bulma's documentation.