Grid and spacings

Abbildung des Rasters auf verschiedenen Ausgabegeräten

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 definition for tablets or small notebooks (13”): 768–1439 pixels

Grid definition for notebooks (15”) and desktops: 1440–1600 pixels

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

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

Spacings für Tablet und Desktop: 768 – 1600 Pixel

Contact

Corporate Design team
JavaScript has been disabled in your browser