---
title: "Layouts"
slug: "layouts"
updated: 2026-02-11T17:11:01Z
published: 2026-02-11T17:11:01Z
canonical: "docs.doc-know.com/layouts"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.doc-know.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layouts

### Layouts

Once you have the **objects** defined for your app, it's time to build the **visual experience** (aka **layout**) you want for your users.

### Layout Hierarchy

**Layouts** have a hierarchical structure, consisting of the following parts.

![hier_parts](https://cdn.document360.io/84e9ea69-d7ee-46a4-a14f-453de3411633/Images/Documentation/hier_parts.png)

![style_hierarchy](https://cdn.document360.io/84e9ea69-d7ee-46a4-a14f-453de3411633/Images/Documentation/style_hierarchy.png)

**Pages** (gray) represent screens that are displayed to the user. The **pink** boxes (**grids**) organize several objects together in one or more rows. The **orange** boxes (**groups**) further organize **sub-groups** of objects together on the same row. The **blue** boxes represent your app's **objects**.

          Tip

          

We recommend first drawing your layouts on pen and paper. Then create your objects and set their properties inside [App Builder](https://docs.doc-know.com/docs/app-installation) to match your design. Finally, test your layouts in the [App Simulator](https://docs.doc-know.com/v1/docs/sim-getting-started). Tweak as necessary.

### Grid Spacing

**Grid spacing** refers to the amount of **padding** (in **pixels**) that surround a grid.

All objects in a **grid** share the same **row** and **column padding**. This is useful to know because it means different parts of a page can have different padding values.

Specify these properties and more in an object's **settings** in [App Builder](https://docs.doc-know.com/docs/app-installation).

![style_spacing1](https://cdn.document360.io/84e9ea69-d7ee-46a4-a14f-453de3411633/Images/Documentation/style_spacing1.png)

### Object Margins

While grids have rows and columns with **padding** (in **pixels**), each **cell** that contains an object further has **margins** (in **pixels**) that describe the padding on each of its four sides.

          Syntax

          

**Margins** are specified in pixels using '**L,T,R,B**' syntax.

- **L** = Left
- **T** = Top
- **R** = Right
- **B** = Bottom

Example: 10,20,10,20

![style_hier_parts2](https://cdn.document360.io/84e9ea69-d7ee-46a4-a14f-453de3411633/Images/Documentation/style_hier_parts2.png)