Grid

Grids help you design with precision no matter what you're designing for. They make sure that the elements are consistent in sizes and positions. In UXPin, there are three types of layout grids: column, baseline, and square. You can set them in the Properties panel by clicking the plus icon next to each grid. You can toggle all grids at once with the Alt "G" shortcut. Grids have their default settings but you can update them with your own properties, and change their color in the Properties panel.

Snapping elements to grids

When the grid is on, elements will snap to it when you move or resize them. To turn this behavior off, go to the View Settings in the bottom right corner of the editor and uncheck Snapping.

Note

Grids are only visible in the UXPin Editor. They will not appear on Preview or when you view your design in the web browser.

Column Grid

Columns are vertical spatial zones or regions that fit from the top to the bottom margin. Column Grids are used for magazines to organize content in columns so it is easier to read.

The Column grid consists of the number of columns, the column width, margins; the distance from the left and the right edges of the canvas to the closest column, and the gutter which is the space between columns or rows.

You can specify your own values for each of the fields. When the margin is set to auto, the grid will be centered. When you change the grid’s properties manually, it will align left.

Baseline Grid

A baseline is a line where the text sits. Baseline grids create a good reading rhythm for any design with lots of text. The height of each line is set to 1 pixel by default and the number of rows is set to auto - which means that the number of rows will automatically adjust to the size of your canvas. You can set your own values for each field.

Square Grid

A square grid is formed by tiling the canvas regularly with squares. By default, the square size is set to 10.