Skip to main content

Customize the GRID Block

How to use the Grid Block

Written by Preet Jain

The Grid Block lets you divide a section of your page into multiple columns, so you can arrange text, images, and other content side by side.

Set Up Your Columns

  1. Click into the Grid Block to open its settings on the right, under Block options.

  2. Use the Columns dropdown to choose how many columns you want (for example, 3 columns).

  3. Add numbers to Column weights (like 1,2,1) if you want some columns wider than others. Leave this blank for equal-width columns.

  4. Set the Gap (px) to control the space between columns.

Set Alignment

  • Vertical alignment: controls how content lines up if columns are different heights — for example, Top keeps everything aligned to the top of the row.

  • Column One alignment, Column Two alignment, and so on: controls how content fills each individual column. Stretch makes the content fill the full column width.

Customize Colors
Open the Colors section to set the block's appearance:

  • Background: sets the background color for the whole block, pulled from your Branding Colors. Choose Transparent if you don't want a background color.

  • Darken background image (%): if you added a background image, use this to darken it so text stays readable on top.

Adjust Layout
Open the Layout section to fine-tune the block's size and spacing:

  • Max Width (px): the maximum width the grid stretches to.

  • Horizontal Padding (px): space added to the left and right of the grid.

  • Vertical Padding (px): space added above and below the grid.

Did this answer your question?