Ask AI

Column Container

Display your blocks side by side

Overview

This Block Container lets you arrange blocks side by side in columns, creating flexible and visually appealing layouts. It's ideal for dashboards, account details, and other structured content, helping you organize related information more effectively within a single container.

1. How to add a block container

You can find Block containers in the Block Panel and add it to any page on your application.

Notion image

2. Select layout

You can choose from several predefined column layouts within the Block Container. These options include:

Notion image
  • Two Columns
  • Three Columns
  • Four Columns
  • 1:2 Layout (one-third width and two-thirds width)
  • 2:1 Layout (two-thirds width and one-third width)
  • 1:3 Layout (one-fourth width and three-fourths width)
  • 3:1 Layout (three-fourths width and one-fourth width)
  • 1:2:1 Layout (one-third, one-third, one-third)

You can easily switch between these layouts after selecting one.

3. Add blocks to the container

After selecting a layout, you can add blocks to the individual container's columns. Not all block types are available for use in these layouts.

Notion image

Currently supported blocks include:

  • Charts
  • Summary Cards
  • List (New)
  • Grid (New)
  • Item Detail (New)
  • Comments
  • Maps
  • Static Blocks (Simple Image, Simple Text, CTA)
🗒️

Form, Calendar, and Table blocks will be supported in future updates.

4. Customize block container

You can customize the appearance and behavior of the Column Block Container with the following options:

  • Title and Subtitle: Set a title and subtitle for the container.
  • Layout: Change column layout
  • Block Alignment: Adjust the alignment of blocks within the container.
  • Background Color: Choose a custom background color for the container.
  • Padding: Adjust padding around the blocks within the container.
  • Border Style: Customize the border style of the container.
  • Visibility: Set visibility options for the container.

Please note that visibility settings apply to all blocks within the container; individual block visibility is not supported.

 
Notion image

5. Move blocks in/out of the container

Easily move blocks in or out of the container using an action button on the canvas without losing your existing settings.

Only supported blocks of the latest versions can be moved into the container.

Notion image
Did this answer your question?
😞
😐
🤩