SmartBlocks: How to Build Structured Grid Layouts in Visme

Building multi-column layouts in a design editor usually means dragging, dropping, and nudging every element into place by hand. SmartBlocks remove that friction entirely — they give you a native row-and-column system directly on the canvas, so you can structure your content in seconds and spend your time on the design itself, not the alignment.

Requirements: Available to all Visme users. No AI credits required.

How to add and set up a SmartBlock

In the editor, open the Basics panel from the left sidebar and select SmartBlocks.

Choose a layout from Blank SmartBlocks (column and row configurations) or Data presets (pre-styled blocks with charts, percentages, and content areas), then click it to add it to the canvas.

To reorder a row or column, hover over it until the handle button appears, then click and drag it to a new position.

To move a content block to a different cell, hover over it until the move icon appears, then drag it to the target cell.

To add content to a cell, click Add Content and choose from Text, Photos, Videos, or Data.

To merge cells, hold Shift or Command+Shift and click each cell you want to merge, then confirm the merge by clicking the Merge icon.

Important: Only the content from the first selected cell is kept when merging. Content in the other cells will be removed. Merged cells can be split apart again at any time.

Left panel settings

With a SmartBlock selected, the left panel gives you full control over the layout:

Use Columns and Rows to change the number of columns and rows in the SmartBlock.

Use Align to set how content sits within each cell — toggle between Horizontal and Vertical to adjust each axis independently.

Use Cell Padding to control the spacing inside each cell, and the Gap slider below it to control the spacing between cells.

Toggle Lock Size on to keep the SmartBlock within its current dimensions when adding rows or columns. Toggle it off to let the block grow to fit.

Toggle Auto-resize text on to scale font sizes proportionally when resizing the SmartBlock. When off, font size stays fixed and the block won’t shrink past the point where text would be clipped.

Toggle Auto-resize image on to make images fill and cover the entire cell — you can then click and drag to reposition the image within the crop. When off, the full image is displayed within the cell without cropping.

Tip: With Auto-resize image on, click and drag the image inside the cell to adjust its position within the crop area.

Toggle Fill on to apply a background color to the entire SmartBlock.

Toggle Border on to add and configure a border around the SmartBlock.

Common issues

“I merged cells and lost my content” | Only the first selected cell’s content survives a merge. If it just happened, undo immediately with Command+Z (Mac) or Ctrl+Z (Windows) before doing anything else.

“My text is getting cut off when I resize the SmartBlock.” | Auto-Resize Text is off. Enable it in the left panel so text scales with the block — or reduce the amount of text in that cell.

“Adding a row or column is making the block bigger than I want.” | Lock Size is off. Turn it on in the left panel to fit new rows and columns within the existing dimensions.

“My image isn’t filling the cell” | Auto-Resize Image is off. Enable it in the left panel, then click and drag to reposition the image within the cell.

– Adding and Editing Text

– Adding Images

SmartBlocks: How to Build Structured Grid Layouts in Visme

How to add and set up a SmartBlock

Left panel settings

Common issues

Related articles

Visme 101