# 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.

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FIwzFvMrITZRX9d5MQGlw%2FGrid%201.png?alt=media\&token=96782f98-7019-4a28-9994-2c2f07c33ad0)

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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FZaS1l6vO9Dmq2bk5xYqV%2FGrid%202.png?alt=media\&token=d04e09fb-c5e0-47ac-8617-76a66daeb81f)

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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FiewyvvG8XhGkMgChCTTE%2FGird%203.png?alt=media\&token=87876d88-c184-49e3-8d63-38618c64c03f)

#### 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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2F6O7gNjdAVLRozgIiDdjZ%2FGrid%204.png?alt=media\&token=13e8035f-2ce8-4817-bee7-e9e3bf0721a3)

* The medium size of the widget

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FoRr5u0XYGGRtZbbGAtpj%2FGrid%205.png?alt=media\&token=35660566-adc6-41f0-a123-7b15ae955839)

* The small size of widget

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FzFGHvnAKbkrMauVDwB7l%2FGrid%206.png?alt=media\&token=9eeb62cb-84a8-4036-9c2f-7e4b99786b57)

#### 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.

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FX5BSP59cvhJIhnY2AEqA%2FGrid%207.png?alt=media\&token=34802b5a-eeeb-4e87-b5b6-c498f17952df)

#### 4. Margin

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

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FTSZxjuKNIDrcAeQCA5AF%2FGird%208.png?alt=media\&token=40c6a07f-f88f-4fae-8c77-337fe7db26c4)

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FM2WnkBVEv5PBqFl4s6NW%2FGrid%209.png?alt=media\&token=d764c646-8ee5-413f-93b1-0a64206a17f0)

### Application detail

This layout grid uses 24 columns for every breakpoint.

![](https://3606779243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDSuDatsiBSDcGYiS7br6%2Fuploads%2FAP2ZYtm3uZWRrWUzl6f7%2FGrid%2010.png?alt=media\&token=16906020-dd1c-4591-82aa-003674d67c12)

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
```