Grid anatomy
-
Container
Containers are a fundamental building block of Coloplast’s grid system that contain, pad and align your content within a given device or viewport.
-
Columns
Columns define the areas of a design that contain content. The column widths are defined by percentages, and will resize based on the screen size.
-
Gutters
Gutters are fixed-width spacing between columns that separate content.
-
Margins
Margins separate content from the left and right edges of the grid. Margins are fixed-width and defined by our space tokens.
Best practice
- Aim to use multiples of 8px when defining measurements, spacing, and positioning elements.
- When necessary use 4px to make more fine-tuned adjustments.
- Whenever possible, make sure that objects line up, both vertically and horizontally (Baseline grid).
- Layout regions are the only aspect of your design that should align to the responsive grid. If you try to align and implement individual elements to the responsive grid, you will compromise the design of the elements and their behaviour.
- Do not extend your layout regions into the gutters; each layout region should span from the outer edges of the columns they cover.
Grid types
2-column grid
This grid supports designs for the smallest screens (up to 540px), such as phones. Content should typically be divided into one (full) or two (half) columns
12-column grid
All designs for screens above 540px get a 12 column grid. The margin differs here, where screens up to 992px have a little more margin (32px) than screens up to 1320px (24px margin).
12-column grid max
For screens past the container max width (1320px), margins are completely removed, allowing content to align all the way to the edges.
Margins and gutters
Margins and gutters differ slightly depending on screen size.
|
Elements |
sm <540px |
md >540px |
lg >992px |
xl >1440px |
|---|---|---|---|---|
|
Columns |
2 |
12 |
12 |
12 |
|
Gutters |
16px |
24px |
24px |
24px |
|
Margins |
24px |
32px |
23px |
0px |
Responsiveness
The main page container should behave as follows:
-
Full width by default
The containers are by default fluid and will take up 100% width in viewports smaller than 1400px.
Fixed width on large viewports
In viewports 1400px or larger, the container will be fixed width of 1320px and centered.
Breakpoints
The front-end grid system has the following breakpoints:
|
Name |
Used for |
Value |
Token |
|---|---|---|---|
|
2xl |
Large laptop/desktop |
1400px |
grid.breakpoint.2xl |
|
xl |
Laptop/Desktop |
1200px |
grid.breakpoint.xl |
|
lg |
Small laptop/desktop |
992px |
grid.breakpoint.lg |
|
md |
Tablet |
768px |
grid.breakpoint.md |
|
sm |
Large phone/small tablet |
540px |
grid.breakpoint.sm |
|
|
Phone |
0px |
|
Designing with grids
There are 4 Figma layout grids available, set up to use the same gutters and page margins as the containers on the front-end. While differences in size and space can be small between Large and Extra Large screens, using the Small and Medium grids for support can have a huge impact on the user experience.
Small screens
The SM grid is intended for most small screens in portrait mode – think mobile.
Medium screens
The MD grid covers most small screens in landscape mode up to medium screens in portrait mode – think mobile in landscape or smaller tablets in portrait.
Large screens
The LG grid covers most medium screens in landscape mode up to large screens in portrait mode – think large tablet in landscape or smaller laptops and desktops.
Extra large screens
XL is perhaps the most used grid when designing for larger screens. It has a fixed width of 1320px, matching the page container’s max-width – think most popular laptop and desktop sizes.
