> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Layout types and position settings

|| Grid mode is in beta and available in selected accounts only.

In the Design view, the right panel sets how a grid scene is laid out: how rows and columns arrange their contents, how wide and tall items are, and whether an item is placed freely or sticks while scrolling. Select a row, column or element on the page to see its settings: the `Layout` block sets how a row or column arranges its contents, and the `Position` block sets how the selected item sits in the row or column around it. The `Grid container` block sets the width of the whole grid.

For backgrounds, see [Backgrounds in a grid scene](https://help.maglr.com/en/article/backgrounds-in-a-grid-scene-110f7ef/).

## Layout types in a grid scene

Every row and column in a grid scene has a layout type. The layout type decides how the contents of the row or column are arranged:

* `Page grid` — the contents line up with the columns of the page grid, so they align with the rest of the page. This is the default; use it unless you need something else.
* `Custom grid` — the row or column has its own column grid, with its own number of columns and gaps. Use it when a row needs a different number of columns than the page, such as five logos side by side.
* `Auto Layout` — the contents line up one after another, horizontally or vertically, with a set gap. Use it when items should sit next to each other at their own size, such as a row of buttons.

When you select a row or column, its layout type is shown as a label on its edge.

## Changing the layout type of a row or column

To change the layout type of a row or column in the Design view:

1. Select the row or column.
2. In the right panel, go to the `Layout row` or `Layout column` block.
3. Choose `Page grid`, `Custom grid` or `Auto Layout`.

Once a row or column uses `Custom grid` or `Auto Layout`, the rows and columns inside it can't be set to `Page grid`.

## Setting up a Custom grid

A row or column with the layout type `Custom grid` has its own column grid. To set it up:

1. Select the row or column.
2. In the `Layout row` or `Layout column` block, set:
   * `Columns` — the number of columns in this grid
   * `Col gap` — the space between the columns
   * `Row gap` — the space between rows of content

In a row with the layout type `Page grid`, the column gap comes from the page grid and can't be changed in the row. The panel then shows `This gap is inherited from the Page grid and cannot be edited here.`

## Setting up an Auto Layout

A row or column with the layout type `Auto Layout` lines its contents up one after another. To set it up:

1. Select the row or column.
2. In the `Layout row` or `Layout column` block, set:
   * the direction: `Horizontal` or `Vertical`
   * `Gap` — the space between the items
   * `Align` — where the items sit in the row or column
   * `Wrap items` or `Do not wrap items` — whether items move to a new line when they don't fit

## Seeing where an item sits

The `Position` block starts with a label for the row or column that holds the selected item, for example `In custom grid 6 cols` or `In autolayout vertical`. For an item that follows the page grid, the label reads `Select parent`. Click the label to select that row or column.

## Setting the width of a top-level row

A top-level row is a row placed directly on the page, not inside another row or column. To set how wide it is on the page:

1. Select the top-level row.
2. In the `Position` block, under `Width`, choose:
   * `Full width` — the row runs from edge to edge of the page
   * `Content area` — the row is as wide as the centred content area of the grid
   * `Medium` or `Small` — the row is narrower than the content area

![Setting a top-level row's Width to Full width, Content area and Small](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/8d-05-row-width_elt9ag.gif =1000xauto)

## Setting where the content of a full-width row sits

`Inner width` sets where the content sits inside a top-level row, for example a row with a full-width background and its text in the centre. To set it:

1. Select the top-level row.
2. In the `Layout row` block, under `Inner width`, choose:
   * `Full row` — the content uses the full width of the row
   * `Content area` — the content stays within the centred content area
   * `Bleed left` or `Bleed right` — the content runs out to the left or right edge of the page, for example an image that runs to the edge while the text next to it stays in the content area
   * `Custom` — the content spans the grid columns you choose

![Setting Inner width to Content area and Bleed left: the content moves while the background stays edge to edge](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/8d-06-inner-width_hlz2t1.gif =1000xauto)

## Setting the height of an item

To set the height of a row, column or element:

1. Select it.
2. In the `Position` block, under `Height`, choose:
   * `Autofit` — the height follows the content
   * `Fixed` — a height you enter
   * `Stretch` — the item fills the height of the row or column around it
   * `Half (50vh)` — half the height of the screen
   * `Full (100vh)` — the full height of the screen, for example for an opening section

![Setting a row's Height to Autofit and then Full (100vh): the row shrinks to its content and grows back to the screen height](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/8d-07-height_rcpb84.gif =1000xauto)

You can also drag the bottom edge of a selected item on the page to make it taller.

## Setting the width of an item in an Auto Layout

An item inside an `Auto Layout` row or column doesn't snap to grid columns. To set its width:

1. Select the item.
2. In the `Position` block, under `Width`, choose:
   * `Autofit` — the width follows the content
   * `Fixed` — a width you enter
   * `Stretch` — the item fills the space that is left

![Setting a button in an Auto Layout to Autofit and then Stretch](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/8d-09-auto-layout-width_1cz6x8b.gif =1000xauto)

## Setting the width of the whole grid

The `Grid container` block sets how wide the grid of the scene is. To open it, select the whole grid: click an empty part of the scene, or select a top-level row and press `Esc`. Then, in the `Grid container` block, under `Grid settings`, choose a width:

* `Full width` — the grid uses the full page width
* `Small` — the grid is at most 900 px wide
* `Large` — the grid is at most 1100 px wide

![Selecting Grid container in the Layers panel and choosing Large and then Small under Grid settings](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/8d-08-grid-width_ikdoz8.gif =1000xauto)

A smaller grid width keeps text-heavy pages readable on wide screens.

When the grid's settings match none of these, `Custom grid` is shown. To change the number of columns, the gaps or the grid width yourself, click `Customize grid`.

Under `Vertical align`, you choose where the content sits when the scene is taller than its content: `Top`, `Center` or `Bottom`.

## Positioning an item freely

In the Design view, you can take an item out of the grid and place it freely inside its row or column, for example a label that overlaps the corner of an image. The other items keep their place, as if the free item wasn't there.

To position an item freely:

1. Select the item.
2. In the `Position` block, open the position menu. It shows how the item is placed now, such as `In grid`.
3. Choose free positioning.
4. Drag the item on the page, or set `Offset` (`X` and `Y`) in the `Free position` settings. Under `Align to`, choose whether the offset is measured from `Its box` or from the `Container`.

![Setting a photo to Free position and dragging it freely around its row](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/8d-03-free-position_1u3ds4e.gif =1000xauto)

Free positioning isn't available for items in a Card list or Card slider, because those rows place their cards themselves.

## Making an item sticky

A sticky item stays in view while the page scrolls, within the row or column that holds it:

* a top-level row sticks while the whole page scrolls, such as a navigation bar
* a column sticks while its row scrolls past, such as a sidebar next to a long text
* an element sticks while its column scrolls past

To make an item sticky:

1. Select the item.
2. In the `Position` block, open the position menu.
3. Turn on `Stick on scroll`.
4. Under `Edge`, choose where it sticks: `Top`, `Center` or `Bottom`. Optionally, set an `Offset (px)` from that edge.

The editor doesn't scroll like a published page, so a sticky item doesn't stick on the canvas. Check it in the preview.

## Layout settings in the Build view

In the Build view, layout types, free positioning and sticky items can't be changed. Build users set a section's width, height and placement with the toolbar above it. See [Arrange content in the Build view](https://help.maglr.com/en/article/arrange-content-in-the-build-view-bj1tw2/).

## Frequently asked questions

### What is the difference between Width and Inner width?

`Width`, in the `Position` block, sets how wide a top-level row is on the page. `Inner width`, in the `Layout row` block, sets where the content sits inside the row. For example, a row with `Width` set to `Full width` can have its background run edge to edge, while `Inner width` set to `Content area` keeps its text in the centre.

### Why can't I set a row back to Page grid?

A row or column inside a `Custom grid` or `Auto Layout` row or column can't use `Page grid`. Only rows and columns that follow the page grid all the way up can be set to `Page grid`. To use `Page grid` again, change the layout type of the outer row or column first.

### Why can't I change the column gap of a row?

A row with the layout type `Page grid` takes its column gap from the page grid, so the gap can't be changed in the row. Change the gap of the whole grid with `Customize grid` in the `Grid container` block, or set the row to `Custom grid` to give it its own gap.

### Why can't I set the width of a column in the right panel?

Column widths in a grid scene are set on the page, not in the right panel. Drag the divider between two columns, or drag the markers on the edge of a selected column. See [Select, move and resize in the Design view](https://help.maglr.com/en/article/select-move-and-resize-in-the-design-view-3o1az1/).

### Is the Custom grid width setting the same as the Custom grid layout type?

No. In the `Grid container` block, `Custom grid` means the width of the whole grid matches none of the presets. As a layout type, `Custom grid` gives one row or column its own column grid.