Layout
A well-designed page layout effectively guides the viewer's attention, enhances information hierarchy and improves overall user experience. There are many ways to approach layout based on the product surface and end-user needs—a person casually browsing their Pinterest feed needs a different layout than a developer reading our API docs or an advertiser analyzing campaign data. We’ll start here by documenting layouts for core Pinterest surfaces on mobile devices.
Pin grid
Grid guidelines refer to the grid layout of Pin representations (reps) only.
Phone
![A two-column default grid layout on a phone.](https://www.pinterest-assets.com/AssetLink/8oun8171j4821g13w5ih1w0sqg3qnkqv/phone-grid-default-png.png)
Default view
![A three-column compact grid layout on a phone.](https://www.pinterest-assets.com/AssetLink/211lwttigo2qfyc11j5u008781odti10/Phone-grid-compact.png)
Compact view
![A one-column wide grid layout on a phone.](https://www.pinterest-assets.com/AssetLink/07n3x73355m148sq53xqlgpk5uf1ovqv/Pin-grid-wide.png)
Wide view
Tablet portrait
![A three-column default grid layout on a tablet in portrait orientation.](https://www.pinterest-assets.com/AssetLink/c10r01156to084m37v1o7d42721fva66/tablet-portrait-grid-default-png.png)
Default view
![A four-column compact grid layout on a tablet in portrait orientation.](https://www.pinterest-assets.com/AssetLink/x7724223hiw2007pv53l6sn23jvc0m4m/tablet-portrait-grid-compact-png.png)
Compact view
![A 2-column wide grid layout on a tablet in portrait orientation.](https://www.pinterest-assets.com/AssetLink/64j84aj3e5r3nb4fcco0h0mp6203g71n/tablet-portrait-grid-wide-png.png)
Wide view
Tablet landscape
![A four-column default grid layout on a tablet in landscape orientation.](https://www.pinterest-assets.com/AssetLink/3e5n2262im4150m4crv31aa6n57se76n/tablet-landscape-grid-default-png.png)
Default view
![A five-column compact grid layout on a tablet in landscape orientation.](https://www.pinterest-assets.com/AssetLink/62fsf38t5smpfysnjq1mf0c016vt0l61/tablet-landscape-grid-compact-png.png)
Compact view
![A 3-column wide grid layout on a tablet in landscape orientation.](https://www.pinterest-assets.com/AssetLink/y73nv03v530061syj6bfw3xd0f0f7ybc/tablet-landscape-grid-wide-png.png)
Wide view
Spacing
Margins and gutters
Space | Use case |
---|---|
$space-40016px/dp |
|
$space-2008px/dp |
|
Horizontal padding
Space | Use case |
---|---|
$space-40016px/dp |
|
$space-2008px/dp |
|
Vertical padding
Space | Use case |
---|---|
$space-80032px/dp |
|
$space-60024px/dp |
|
$space-40016px/dp |
|
$space-2008px/dp |
|
Token pending2px/dp |
|
Banners, Modals, Toasts and Text
Phones in-line elements
Full-width minus space-200 (8px/dp) margins around banners, Toasts and Text
![A spec showing 8px spacing around banners and Toasts.](https://www.pinterest-assets.com/AssetLink/d5nf4r0d564mm3p0ve167f30s6nto2s5/phone-layout-spacing-png.png)
Tablet portrait and landscape
64% of portrait and landscape screen width, based on 8 columns of an underlying 12-column grid
![A spec showing a Toast on a tablet portrait screen with a note saying 64% of 720=461.](https://www.pinterest-assets.com/AssetLink/nx0p18ele3pa6xc7e2x08c5wpxp5pwc2/Tablet-layout-spacing.png)
Related
Spacing tokens
Alll of our cross-platform spacing tokens
Form structure and behavior
Guidelines for spacing and structuring forms on dense desktop screens
Form layout example code
Code that developers can copy and paste to layout a form quickly