Grid

Under Review Available since 1.0.0

Fiori Fundamentals uses responsive grid system with a 12-column flow layout. It is used to create flexible layouts for various screen sizes and device types.

Tablet example grid

default grid



Breakpoints

New Release Available since 1.0.0 Last updated 1.4.0

When considering responsive views we follow a mobile-first approach where screens are built for small screens and adapted for larger screens. This means that S is always the default and we modify for M and above.

Size Target Devices Breakpoints Margin Gutter
S Portrait Phone <600px 8px 8px
M Landscape Phone, Portrait Tablet 601-1024px 16px 16px
L Landscape Tablet, Small Laptops 1025-1440px 32px 16px
XL Pro Laptops, Desktop 1441-1920px 32px 20px
XXL Pro Displays 1921px 48px 20px