> For the complete documentation index, see [llms.txt](https://docs.sentre.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sentre.io/design-pricinples/grid.md).

# Grid

### Screen sizes & breakpoints

Apps can run on any device, which includes phones, tablets, desktops. With a huge number of device targets and screen sizes, rather than optimizing your UI for each device, we recommended designing for breakpoints: 

* XS (screen < 576px)&#x20;
* SM (576px <= screen < 768px )&#x20;
* MD (768px <= screen < 992px )&#x20;
* LG (992px <= screen < 1200px )&#x20;
* XL (screen >= 1200px)

### Widget dashboard

#### 1. Columns

Content is placed in the areas of the screen that contain columns.

* At breakpoints of XL and LG, this layout grid uses 4 columns.

![](/files/fT9pUjEGULlZDyDeEToJ)

* At breakpoints of MD and SM, this layout grid uses 2 columns.

![](/files/sNF527vxdZ2O8WcJEKK2)

* At a breakpoint of XS, this layout grid uses 1 column.

![](/files/BOLw6FCDxUfHqA2Wiw1a)

#### 2. Widget size

Sen OS uses three levels of widget size: large, medium, and small. Corresponding to each breakpoint will use a different number of columns.

* The large size of the widget

![](/files/zNbyhCUWk2OhUkcNT1kP)

* The medium size of the widget

![](/files/cG6v6c4skLrZnLbVaPRB)

* The small size of widget

![](/files/BOviLm0fr1VBJyKSmwuA)

#### 3. Gutter

A gutter is a gap between columns by horizontal and components by vertical that helps separate content.

At a breakpoint of XL, LG, MD, and SM, this layout grid uses 24px gutters for both vertical and horizontal. The XS doesn’t have a horizontal gutter but still uses 24px vertical gutters.

![](/files/PrzWMR96LdnFVtuLFjEK)

#### 4. Margin

Margins are the space between content and the left and right edges of the screen. All breakpoints use 16px margins.

![](/files/3siqOAbRXZevBxNWiUpO)

![](/files/KHIzkDqHYwWqO9F3rx9I)

### Application detail

This layout grid uses 24 columns for every breakpoint.

![](/files/82QG2r4NhZ7hcSyOmsOn)

We set the value of the Gutter of the grid in the page, such that when the browser expands or shrinks in a certain range, the column width of the grid will expand or shrink accordingly, but the width of the gutter is always fixed.

### Sample code

```
// Some code
```