Locate the specific column you want to make changes to.

Check the option for "Custom Column Size".

"Column Breakpoint" defines the screen size at which your customized column layout will take effect.

The "Column Width" determines how wide your column will be.

A single row can have a total of 12 column widths. For instance, setting a column to 6 column widths means it will take up half the row.

The "Column Offset" sets a left spacing for your column. This is useful if you want to add some space before your column starts.

The "Column Order" decides the sequence of your column for the specified screen size above. For example, setting it to "1" means this column will be the first one at that particular screen size.

Smart rules
Add
Previous
1/2
Next
Desktop
Column Breakpoint
Desktop
Column Width
6
Column Offset
0
Column Order
Open in Design Manager

In this example, the column is:

- Spanning 6 column widths.
- Has an offset of 0.
- Is ordered as the first column.
- Applied to the "Desktop" screen size.

You can configure multiple column layouts to adapt to different screen sizes.

For example, you can set a column to be 4 column widths on a desktop and 6 column widths on a mobile device.

- **On Desktop**:
  - Set the "Column Breakpoint" to "Desktop".
  - Set the "Column Width" to 4.
- **On Mobile**:
  - Set the "Column Breakpoint" to "Mobile".
  - Set the "Column Width" to 6.