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.
Mozaic allows you to use two types of containers:
- The default container: it's a fixed container that has a maximum width from L breakpoint and above
- The fluid container: which has a width equal to 100% regardless of the breakpoints
Default container
The default container follows these rules:
| Viewport | Container width | External margins (on each side) |
|---|---|---|
| S (> 0px) | 100% | 16px (1mu) |
| M (> 680px) | 100% | 32px (2mu) |
| L (> 1024px) | 928px (58mu) | 48px (3mu) |
| XL (> 1280px) | 1216px (76mu) | 32px (2mu) |
| XXL (> 1920px) | 1840px (115mu) | 40px (2.5mu) |
Reminder : mu = MagicUnit.
The fluid container
The fluid container uses the same paddings values as the default container but is fluid at any viewport width.
| Viewport | Container width | External margins (on each side) |
|---|---|---|
| S (> 0px) | 100% | 16px (1mu) |
| M (> 680px) | 100% | 32px (2mu) |
| L (> 1024px) | 100% | 48px (3mu) |
| XL (> 1280px) | 100% | 32px (2mu) |
| XXL (> 1920px) | 100% | 40px (2.5mu) |
Related documentation
See also the grid documentations