Columns Element

Use the Columns component to get a responsive design.

In this tutorial, you will learn:

1. What is the Grid System?

2. The Dittofi columns component

3. Adding content to your columns

4. What are Grid Classes?

What is the grid system?

Imagine that your canvas is split up into 12 columns of equal width, as below. This is the way that every web page is structured behind the scenes.

You can either have 12 columns of equal width as above, & then place your content inside one of those 12 columns, or you can have your columns span multiple columns, as below.

Notice that the total number of columns always adds up to twelve,

• 4 / 4 / 4

• 4 / 8

• 6 / 12

• 12

The Dittofi columns component

The Dittofi columns component allows you to to create a grid that you can add components to.

The columns component is comprised of columns inside a column. You can see this by first adding a columns component, then selecting one of the columns & lastly checking the breadcrumb trail at the bottom of the page.

The breadcrumb trail shows you that Body contains Columns, contains Column.

When you add the columns component, it comes with two columns of width 6 & 6. To modify the default, you can either use one of the pre-built column sets from the settings drop down, as below.

Or you can edit individual column widths from the properties panel on the right of the screen, as below.

Adding content to your columns

Just like every other component is on the page, a column is a box. This means that you can add content to the column. You can for example add images, headings & paragraphs.

You can also add columns inside columns. The column width is split into 12, in the same way we explained above. The columns you add to your column will span up to 12 columns.

What are Grid Classes?

The Grid System is responsive. This means that the columns can be rearranged depending on the screen size. For example, if you have three columns that span 4 columns each & contain some basic content. On a large screen it might look better to have the content arranged in three columns that span 4 columns as below.

But on a small screen, it might be better to have this content stacked on top of each other.

To accomplish this responsiveness, you can use Grid Classes. These allow you to set different width columns for different size screens.

Inside Dittofi, the settings for this is under the properties panel. You can get access to this by first selecting the column & then clicking on the cog icon at the top of the styles panel.

Using the box above, you're able to set different size column widths for different screen sizes, for example LG (Desktop Width) 6 & XS (Mobile Width) 12 means that the column will span 6 columns on a Desktop, but 12 columns on a mobile.