![abstract structure abstract structure](/content/dam/munichre/global/images/royalty-free/GettyImages-1088950364.jpg/_jcr_content/renditions/cropped.3_to_1.jpg./cropped.3_to_1.jpg)
Framework
properties.trackTitle
properties.trackSubtitle
Breakpoints
For our responsive corporate website we defined 3 different breakpoints:
- Mobile > 600px
- Tablet > 768px
- Desktop > 1024px
![Corporate website breakpoints and responsive behaviour Corporate website breakpoints and responsive behaviour](/content/dam/munichre/brandportal/images-brand-portal/mre_grid_diagram.jpg/_jcr_content/renditions/original./mre_grid_diagram.jpg)
Corporate website breakpoints and responsive behaviour
12 Column Grid
The grid is providing uniformity to layouts across different viewports.
Our grid consists of 12 columns and is fluid with dynamically adaptive column width but fixed gutter and margin width. Gutter and margin width change from smaller to larger viewports to avoid elements being visually placed to far apart in small viewports or being visually too close on large viewports.
![Munich Re grid Munich Re grid](/content/dam/munichre/brandportal/images-brand-portal/mre_grid.jpg/_jcr_content/renditions/original./mre_grid.jpg)
We defined the following percentages for the grid, in which the web components are placed accordingly:
Desktop%:
- Full Width
- 100%, with 50%. 33% and 25% components (teasers).
- 80% left aligned
Tablet%:
- Full Width
- 100% with 50%. 33% components (teasers).
Mobile%:
- Full Width
- 100%