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

Grid units and resolution of the TV screen

Safe Area

The safe area is an area where TV images appear. For this safe area, the webOS TV screen has a 20 px margin area around the edges as below image.

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

Safety area and margins of the TV screen

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

Safety area and margins of the panel control in the Moonstone library