Learn how to make your content fit on your TV according to the purpose of the specific content, using Grid provided by webOS TV.

What is the Grid?

The layout grid provides consistent layout units used to declare panel width. The layout grid gives developers, and designers a common point of reference when designing application screens.

How Do I Use the Grid?

Use Grid Units to measure the panel width. Use the Gutter space between the panels and objects. 

Gutter Grid Unit
20px width x 40px height 60px width x 40px height


Safe Area

The safe area is an area where a TV image is shown. To guard this safe area, webOS TV screen has a 20px margin area around the edges as below image.

Be careful not to place UI controls or icons outside of this area. All selectable objects, text, and company branding logos must be placed within the safe area.


However, if you develop an enyo app using the panel control provided by the moonstone library, it maintains a 20 px padding inside of panel as below so controls don't get clipped at the edges of the webOS TV screen.