Adjust the width of columns

You can use columns to arrange content in structured layouts, making your site visually appealing and easy to navigate. In this guide, you’ll learn how to resize the width of individual columns and change the width of the entire set of columns.

If you want to set different widths for individual columns, take the following steps:

1. Select a single Column either by using List View or the block toolbar. It’s often easier to use List View, which you’ll find by clicking the icon that looks like three horizontal lines at the top left of the screen.
2. Locate a single Column block here and click on it:

3. In the Column block settings sidebar on the right side of the screen, locate the width setting:

4. Here, you can set a value for the width. If the unit is set to px (pixels), it’s often easier to set it to % (percentage) instead. Common configurations for width of columns include:
   • Two columns of equal width (50%, 50%)
   • Three columns of equal width (33%, 33%, 33%)
   • One wider column and one narrower column (66%, 33%)
   • One larger column in the middle with two smaller columns either side (25%, 50%, 25%)
5. Click the “Save” button to save your changes.

To change the width of an entire set of columns, take the following steps:

1. Select List View in the top-left corner of the editor.
2. Locate the Columns block here and click on it:

3. In the block toolbar that appears above or below the selected column, choose the width option (the option looks like a rectangular block with a horizontal line underneath it):

4. Choose from “None,” “Wide width,” or “Full width“. These options will only appear if your theme supports it.

The size of these width values are determined by your theme! To learn more, visit our guide to changing the width of content.

Use the layout settings of the individual Column block to control the width and position of blocks inside of a column.

When the option “Inner blocks use content width” is toggled OFF, blocks within the column will fill the width of the column’s container.

For more control over the width of the inner blocks, toggle the “Inner blocks use content width” option to the ON position. You can then specify the width of the inner blocks using the following options:

• Content: The width of the content area for blocks not set to wide or full-width.
• Wide: The width of the content for blocks set to wide width.

You can use the Justification setting to align the inner blocks to the left, right, or center of the column.