Move blocks around your pages to customize layouts or create columns and rows.

This guide is a next step to Adding content with blocks, which we suggest you read first if you're new to Squarespace.

Note: You can move a block within the page content area where it was added. It's not possible to move blocks between pages or separate content areas, such as from a footer to a header.

Watch a video

How block layouts work

Before moving blocks, we recommend reviewing these terms to learn more about how our block system works.

Content area grid

The content area grid is an invisible blueprint that controls where you can place blocks. In most areas, like layout pages and blog posts, the grid supports up to 12 columns and an unlimited amount of rows. Some areas, like footers, may have different limitations.

Blocks in motion

When clicking and dragging a block to change its position in the grid, the block will appear semi-transparent.

Gray boxes

If you’re floating a block within a text area, a gray box will appear wherever the block is placed to show how text will wrap around it.

Guidelines

When moving a block, lines called guidelines appear to show you where you're placing the block. These are especially useful when you’re creating columns and rows.

As you drag blocks around, the guidelines change to show if the block will:

• Span the full height of a page, creating a new column.
• Span the full width of the page, creating a new row.
• Match the height or width of another block, placing the block into an existing column or row.

Line blocks and spacer blocks

Line blocks and spacer blocks are useful tools for separating content into columns and rows.

Since text blocks often merge when stacked, you can use a line or spacer block to divide text and prevent merging. See the section below on text blocks for help with this.

You can also use line and spacer blocks to temporarily separate content while laying out a page or content area. Use a line or spacer block to divide rows, then add blocks to create new parallel columns. After the content is arranged, remove the line or spacer blocks, keeping in mind text blocks may merge after removing the line or spacer.

Move a block

To move a block:

Float images and other blocks in text

You can float a block within an area of text to create a text-wrapping effect. This video shows version 7.0, but also applies to version 7.1.

You may want to do this with an image to create a unique, multi-column layout in a blog post or on a page of text.

To create this layout, click and drag a block over a text block. A gray box shows where the block will appear in the text.

Create columns and rows

This video shows version 7.0, but also applies to version 7.1. However, if your site is on version 7.1, we recommend using auto layouts to automatically create columns and rows of content instead of manually arranging blocks.

Create columns

Columns can span the entire height of the content area or align with a block in an existing row to create a matching-height column. To create a column:

1. Hover over a block you want to move. Your cursor will turn into a hand icon. If you don't see the hand appear, click the block first.
2. Click and drag the block to move it around the page.
3. As you move the block, guidelines appear that show the new column that block will occupy.
4. Follow the steps below to either add the column to a full-page or matching-height column.

Create a full-page column

To create a new column that stretches the full height of the page, click and drag a block until the guideline stretches vertically along the entire page. This creates a new column that splits the entire page.

Create a matching-height column

To match a new column to the height of another block, click and drag the block until the guideline matches the height of the other block. This is useful for placing blocks side-by-side above or below wider blocks.

Change column width

To create columns that are all the same width, you'll need to have one of these numbers of columns:

• 1
• 2
• 3
• 4
• 6
• 12

If you have a different number of columns, they'll have varying widths. This rule applies to all content areas of your site except sidebars and some footers.

To change a column's width:

1. Hover your cursor between two blocks until you see two arrows, pointing left and right.
2. Click and drag to expand and shrink the column.
3. This changes both the column width and the overall size of both blocks.
4. Repeat with the spaces between other blocks in the row as necessary.

Create rows

Rows can span the entire width of the content area or align with a block in an existing column to create a stack. To create a row:

1. Hover over the block you want to move. Your cursor will turn into a hand icon. If you don't see the hand appear, click the block first.
2. Click and drag the block to move it around the page.
3. As you move the block, guidelines appear to show the column or row the block will occupy.
4. Follow the steps below to either place your block into a full-page row or aligned row.

Tip: Image blocks, spacer blocks, map blocks, and carousel gallery blocks include a cropping handle which you can use to to adjust the block's height. Use these blocks to customize row heights on your page.

Create a full-page row

To create a new row stretching the entire page or post, click and drag a block so the guideline stretches horizontally across the entire page.

Create a matching-width row

To match the width of another block, move a block above or below another block until the guideline shrinks to match the width of existing block. Instead of creating an entire row across the page, this action stacks individual blocks on top of each other.

Create text-only columns and rows

Moving text into columns or rows can be tricky. text blocks will often merge when stacked. You can avoid this by using spacer blocks to separate content while building the page.

Text columns

Moving text into columns is a great way to visually divide content or to pair text with other blocks, like image blocks. To create text columns:

1. Add your first text block anywhere on the page.
2. Click an insert point anywhere on the page to add a spacer block. Click and drag the block next to the first text block.

3. Click an insert point anywhere on the page to add your next text block. As text blocks can sometimes be difficult to move after they're placed, click and drag the Text icon directly from the block menu. You’ll see guidelines appear, just as they do when you move a block that’s already been placed.
4. Drag the Text icon toward the spacer block until the guideline shrinks to the same height, then release it and add your text.

5. Repeat the process of adding spacer blocks and text blocks for as many text columns as you need.
6. When you've placed all your text columns, delete the spacer blocks to leave only the text columns.

Text rows

Text blocks stacked often merge into a single block. To keep these blocks separate, we recommend dividing your text with a line or spacer block. For more defined spaces, use a line block. For an open space, use a spacer block.

Combine columns and rows

You may want to combine columns and rows to customize your page. A common example is a company bio page, where you might want to place text blocks with corresponding image blocks in even rows. In this example, we’re combining three image blocks and three text blocks.

To combine columns and rows:

1. Add three image blocks, each in their own column, using the steps for creating matching height columns above.
2. Add a text block below each image block. Ensure that the guideline matches the image block above it, which will create a new row within the existing column below each image.

If you need titles, add them at the top of each column using additional text blocks aligned with the image blocks.

Troubleshooting

My images are different sizes

For best results, it helps to ensure each image you’re using has the same aspect ratio before uploading. Usually, we recommend using images at least 1500 pixels in width. For help adjusting your images, visit Formatting your images for display on the web.

My layout of columns and rows doesn't appear on a mobile device

To keep your site legible and prevent visitors from having to pinch, zoom, and scroll to see your content, Squarespace's responsive design automatically stacks blocks vertically on mobile devices. The order of your blocks will depend on the structure of your columns and rows.

To learn more, visit Page and block changes on mobile devices.