Container design - 3 column layout

The three column container layout is useful for a variety of use cases, and we have even used this to make our roadmap space template.

When using containers in your Bettermode community, you only have to worry about these 2 basic principles (no code rules!):

  1. The main container direction (the container that’s holding all of the containers inside it) The direction should always be a horizontal grid.

  2. Containers for blocks based on the number of columns you want to separate them over. The direction should always be a vertical row for these containers.

For the 3-column layout, you’ll need to do this:

  1. Create a container block that is 3 columns wide (large) in size and set the direction to a horizontal grid.

  1. Create 3 container blocks inside the container block that you made in step 1 (you’ll make the same container with the same options 3 times).

2.1. Create a container that’s 1 column wide (small) and set the direction to a vertical row.

2.2. Create a container that’s 1 column wide (small) and set the direction to a vertical row.

2.3. Create a container that’s 1 column wide (small) and set the direction to a vertical row.

  1. Add the blocks of your choice to these 3 columns by clicking on β€œβ€¦β€ and selecting add block.

  2. You’ll now have a 3 column layout with the blocks of your choice!

Using the container block in your Bettermode Community is easy once you’ve learned those two simple rules! Simply apply the logic above, and start creating a 3 column layout in your community!

Contact Us

Do you still need help? Learn how to get in touch with the Bettermode Team.