Grid and spacings
Column system for all screen sizes
ETH website design is based on a flexible grid system that allows layouts to be displayed correctly on all screen sizes.
The grid system is built on a 12-column concept. Tablets in vertical format use six columns; mobile devices use four.
The grid is centred in the content area and varies depending on the width of the viewport. The maximum width is 1348 pixels, after which point the background elements stretch out to fill the entire width.
Grid definition per breakpoint
Grid definition for mobile: 320–480 pixels
Grid | Screen Size | Offset | Gutter | Columns | Column width | Width |
|---|---|---|---|---|---|---|
| XS | 320 – 479 px | 24 px | 16 px | 4 | fluid stretch | 100% |
| Small | 480 – 767 px | 24 px | 16 px | 4 | fluid stretch | 100% |
Grid definition for tablets or small notebooks (13”): 768–1439 pixels
Grid | Screen Size | Offset | Gutter | Columns | Column width | Width |
|---|---|---|---|---|---|---|
| Medium | 768 – 1023 px | 24 px | 16 px | 8 | fluid stretch | 100% |
| Large | 1024 – 1279 px | 40 px | 16 px | 12 | fluid stretch | 100% |
| X Large | 1280 – 1439 px | 96 px | 16 px | 12 | fluid stretch | 100% |
Grid definition for notebooks (15”) and desktops: 1440–1600 pixels
Grid | Screen Size | Offset | Gutter | Columns | Column width | Width |
|---|---|---|---|---|---|---|
| XXL | 1440 – 1599 px | min. 96 px | 16 px | 12 | fluid stretch | max. 1348 px |
| XXXL | 1600+ | flexible | 16 px | 12 | fluid stretch | max. 1348 px |
Uniform spacing between design elements
In order to ensure uniform spacing between elements, the following basic sizes have been defined. These sizes are defined as variables in the frontend.
Fixed spacing
$space-fixed-giga | $space-fixed-kilo | $space-fixed-deci | $space-fixed-centi | $space-fixed-mili | $space-fixed-micro | $space-fixed-nano | $space-fixed-pico |
|---|---|---|---|---|---|---|---|
| 48 | 32 | 24 | 20 | 16 | 12 | 8 | 4 |
Responsive spacing behaviour
Spacing size increases as the size of the viewport grows. A responsive spacing table defines how spacing elements behave across different breakpoints. The table sets out how much the spacing changes. This means that each component does not have a fixed distance from other components; rather, it changes according to the table and scales to adapt to different devices.
Spacings für Mobile: 320 – 767 Pixel
$space-curve | Screensize 320–767 Pixel |
|---|---|
| $space-curve-tera | 48 |
| $space-curve-giga | 32 |
| $space-curve-mega | 24 |
| $space-curve-kilo | 24 |
| $space-curve-hekto | 20 |
| $space-curve-deci | 16 |
| $space-curve-centi | 12 |
| $space-curve-mili | 12 |
| $space-curve-micro | 8 |
| $space-curve-nano | 4 |
Spacings für Tablet und Desktop: 768 – 1600 Pixel
$space-curve | Screensize 768–1600 |
|---|---|
| $space-curve-tera | 64 |
| $space-curve-giga | 48 |
| $space-curve-mega | 40 |
| $space-curve-kilo | 32 |
| $space-curve-hekto | 24 |
| $space-curve-deci | 24 |
| $space-curve-centi | 20 |
| $space-curve-mili | 16 |
| $space-curve-micro | 12 |
| $space-curve-nano | 8 |
Contact