A grid is used to create a structured and harmonious design for every breakpoints. It is the frame of your page that allows you to build your layout by placing blocks of contents (texts, images, etc.) using a certain number of columns.
- Columns: It allows us to place and structure the content.
- Gutters: It's the space between the columns, it gives the design some air and helps to split the content.
- Margins: It's the space between the edge of the screen and the container.
- Container: The container defines the main content width as well as the minimum negative space between the horizontal edges of the screen and the content.
Those properties can change depending on the breakpoint.
When using a grid, you decide the size of your elements by the number of columns they use.
We work with 12-columns grids because the number twelve is the most versatile. Twelve is divisible among reasonably small numbers; it’s possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers a lot of flexibility when they create a layout.
|Breakpoint||Container width||Columns||Columns width||Gutters width||Margins (on each side)|
|928px / Fluid||12|
|1216px / Fluid||12|
|1840px / Fluid||12|
Reminder : mu = MagicUnit. Ex: 3.5mu = MagicUnit \* 3.5
The default grid uses the default container.