🏛 Columns

Columns help us place and organize content side-by-side horizontally or vertically.

The cool thing about columns is that they come with a couple of user-friendly presets.

In mosaic mode, you can choose to display 2, 3, or 4 columns of the same size by default:

Something else that’s pretty neat is that you can easily resize columns on the Canvas if you don’t need every column to be exactly the same size:

Adding Content Inside Columns

As with every other container in WeWeb, you can drag and drop other containers or elements inside the columns element.

In the example below, you can see in the Navigator that the Jobs Column element has a number of children elements:

• a "Job Wrapper" flexbox container that contains…
• a "Job" flexbox container that contains…
• two flexbox containers: one with an image of the logo, and one with more information about the job

All these containers and elements translate into what you see on the Canvas:

By default Columns are going to have a small amount of padding on the sides, but you can adjust that in the elements style settings:

🔥 Pro Tip 🔥

Compared to flexbox containers, columns are slightly more user friendly but also more bulky in the code which is why some developers prefer to use flexboxes.