Layout in product
A responsive grid dynamically updates the page layout according to viewport size. The use of a grid allows us to remain consistent throughout our products and platforms.
A responsive grid dynamically updates the page layout according to viewport size. The use of a grid allows us to remain consistent throughout our products and platforms.
Use for small to medium screens.
Use for medium to large screens.
Use for large to x-large screens.
Use for x-large screens. The columns are fixed-widths with auto margins from 1680px+. Max design area excluding margins is 1584px wide.
Designers should create focused layouts for at least three core screen sizes—small (375px), medium (768px), and large (1280px)—to effectively collaborate with development partners. While (320px) widths may not be a standard design size, it is our minimum supported viewport and should remain a consideration. Whenever possible, we recommend designing across the full range of screen sizes listed below to ensure optimal behavior at all breakpoints and a smoother development handoff.
Evolution uses a proportional layout system anchored around a base value of 8px. For detailed and complex components, factors of 2 may be used sparingly to create additional hierarchy. See spacing tokens for more information.
On web, we utilize eight breakpoints for maximum scalability and control over layouts and components. These breakpoints are 320, 512, 768, 1024, 1280, 1440, 1680 and 1920px. Refer to the eBay skin page grid documentation for the latest resources.
Designs need to flex down to 320px and up to 1680px. Through our mobile-first approach, our official support for the smallest viewport width is 320px. However, technically speaking, there is no “minimum” breakpoint required.
