Content is placed in the areas of the screen that contain columns. In responsive layouts, column width is defined with percentages, rather than fixed values. This allows content to adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes.
Columns, gutters and margins
The responsive layout grid is made up of three elements: columns, gutters and margins.
A gutter is the space between columns that helps separate content. Gutter widths are fixed values at each breakpoint range. To better adapt to a given screen size, gutter widths can change at different breakpoints.
Margins are the space between the content and the left and right edges of the screen. Border widths are defined by fixed or scaling values at each breakpoint area. Wider margins are better for larger screens because they create more white space around the edge of the content.
The 12 column desktop grid is applied at a resolution of 992-1090 px. At large breakpoints (≥ 1091 px) the body region can maintain a maximum width of 1011 px while margins again scale horizontally.
The 12 column tablet grid is applied at a resolution of 640-991 px.
The 4 column smartphone grid is applied at a resolution up to 639 px.
The responsive layout grid is primarily used to organize content and components in the body area of a layout.
When scaling a layout for different screen sizes or orientations, the responsive grid adjusts the margin and body widths and the number of columns in the layout.
|Screen size||Margin||Gutter||Body||Layout columns|
|0-639 px||24 px||20 px||Scaling||4|
|640-991 px||40 px||20 px||Scaling||12|
|992-1090 px||40 px||21 px||Scaling||12|
|≥ 1091 px||Scaling||21 px||1011 px||12|
For further information get in touch
HARTMANN Branding Support