Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Creating columns and rows with blocks

You can arrange content into columns and rows by dragging blocks and following guidelines to assist with placement.

If you’re new to Squarespace, we recommend these guides and videos before starting this guide:

Tip: Keep an eye on the guidelines – the black lines that appear when clicking and dragging blocks. If the guideline spans the full height of the page, this will create a new column. If the guideline spans the full width of a page, this will create a new row.

Glossary

Before creating columns and rows, we recommend reviewing these terms:

Content area grid

The content area grid is an invisible blueprint that controls where you can place blocks. In most areas, like Regular Pages and blog posts, the grid supports up to 12 columns and an unlimited amount of rows.

Some template-specific areas, like sidebars and footers, have different limitations. To learn about these areas of your template, visit our template guides.

Guidelines

When moving a block, these black lines appear to show you where you're placing the block.

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.

Blocks in motion

When clicking and dragging a block to change its position in the grid, the block will appear semi-transparent. If you’re floating a block within a text area, a gray box will appear wherever the block is placed to indicate how text will wrap around it.   

Line Block and Spacer Block

The Line Block and Spacer Block 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 the Spacer and Line Blocks to temporarily separate content while laying out a page or content area. Use a Line Block to divide rows, then add blocks to create new parallel columns. Once the content is arranged, remove the Line or Spacer Blocks. Please be aware that Text Blocks may merge after removing the Line or Spacer.

Create columns

There are two types of columns in Squarespace:

  • A full-page column is a new column that spans the entire height of a page. This splits the entire page, making more room to stack blocks vertically.
  • A matching-height column aligns with a block in an existing column. It doesn't enter the rows above or below it. Instead of creating a column that splits the entire page, a matching-height column creates a more intricate layout.

To create a column:

  1. Hover over a block you want to move.
  2. Your cursor will turn into a hand icon, allowing you to 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.
  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

Like columns, you can create two types of 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.
  2. Your cursor will turn into a hand icon, letting you 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. Use the guideline to place your block into a full-page row or aligned row.
Note: Image Blocks, Spacer Blocks, Map Blocks, and Carousel Gallery Blocks include a cropping handle that allows you 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.

Creating text-only columns and rows

Moving text into columns or rows can be tricky. Text Blocks will often merge when placed next to each other. You can avoid this by using a Spacer Block 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.

Add your first Text Block anywhere on the page.

Next, click an Insert Point anywhere on the page to add a Spacer Block. Click and drag the block next to the first Text Block.

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 this second block directly from the Text option in the Block Menu. You’ll see guidelines appear, just as they do when you move a block that’s already been placed.

Move the second Text Block towards the Spacer Block until the guideline shrinks to the same height, then release it. Add your text to the new block. 

You’ll now have two columns of text, separated by a space. Repeat the process of adding Spacer Blocks and Text Blocks for as many text columns as you need. 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 on a company bio or “About” 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. This is the same structure you’ll see in some template demo content, including Five.

First, add three Image Blocks, each in their own column, using the steps for creating matching width rows above.

Next, 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

Tip: When creating a page layout, it can help to play around with dragging and dropping blocks. Especially if you're new to Squarespace, experimenting with snapping blocks into place is a great way to get familiar with our platform and achieve the page layout you want.

My images are different sizes

For best results, it helps to ensure each image you’re using has the same aspect ratio before uploading. In most cases, 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 columns are uneven

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

To change the width for these number of columns, follow the steps in the Columns section of this guide. If you have a different number of columns (for example, if you have five or seven blocks in a row), they must have varying widths.

My columns become rows on a mobile device

This is expected behavior. Squarespace's responsive design automatically stacks blocks vertically on mobile devices

Was this article helpful?
19 out of 42 found this helpful
Creating columns and rows with blocks