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.

In order to ensure uniform spacing between elements, the following basic sizes have been defined. These sizes are defined as variables in the frontend.

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.