Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

To make things more easily legible and increase your ability to organize things in Edit Mode we made it so that Columns stack on top of one another in Edit Mode. To make each column / grid item stand out a bit more we've added background styling to them.

Using this feature you can customize the background color for these column ares in Edit Mode. This will not affect the output on your site or in Preview Mode.

Here we decide how our column layout will be presented at each of the 6 responsive breakpoints.

By default we've set it up so Foundry uses Auto mode for all breakpoints. We've set the Extra Small breakpoint to Auto and have the other 5 breakpoints inheriting that setting. This setting is sufficent for a great deal of layouts.

Each breakpoint can be set to have a layout of its own. When setting the layout for a breakpoint you can choose between 1 and 6 columns. This will mean you'll have that many items per row at that brekapoint.

When the Extra Small breakpoint is set to the Auto option you'll also receive this checkbox. When enabled the layout will automatically set itself to 1 Column for the Extra Small breakpoint. This option is on by default. Disabling this option means the Columns / Grid tool will attempt to auto arrange child items within the tool to fit side-by-side at the Extra Small breakpoint where possible.

Enabling this feature puts even more control in your hands. When this feature is used you can adjust each individual column's width, at each breakpoint, from within the child items in the Columns / Grid tool.

This is adds a great deal of versatility and allows for more advanced customization for your page layout, no matter the breakpoint. See the Child Item settings further down this page for more information on the available settings.

Here you can choose from the various different Foundry gutter presets. You can change the spacing between columns in both the horizontal and vertical direction, or disable it al together.

By clicking the small + icon above these settings you'll be given the ability to adjust these gutters more granularly at each of the 6 responsive breakpoints.

Here we can adjust the vertical alignment of content within ALL child items in this Columns / Grid instance. By clicking the small + icon above this setting you can opt to adjust the content alignment at each responsive breakpoint.

Additionally each child item has an override for the Content Alignment as well.

Content Alignment deals with the elements placed within the columns. The columns remain their same height.

This, of the two vertical alignment features, will be the one you'll most often turn to when adjusting the vertical alignment.

Here we can adjust the vertical alignment of columns themselves. By clicking the small + icon above this setting you can opt to adjust the column alignment at each responsive breakpoint.

Additionally each child item has an override for the Column Alignment as well.

Column Alignment changes the height of the columns themselves. This one will be used far less often than the Content Alignment option.

Some Foundry tools, like the Slider tool for example, require the overflow property of columns to be set to hidden in order for them to display properly and not break the layout. This setting is enabled by default.

If you're using something like an Image with a Shadow enabled within the Columns tool, you'll need to disable this option so that the shadow can be seen properly as it extends past the bounds of the Columns & Grid tool, overflowing its bounds.

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

This field allows you to replace the default HTML Comment with your own text.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

These settings allow customization for each of the child items individually. This allows us a great deal of versatility in designing our layouts.

Enabling this feature allows you to manually customize the responsive width of this individual column on a per breakpoint basis.

The width is measured in fractional units. A full row consist of 12 units.

You can set each breakpoint individually, or have some breakpoints inherit their widths from the next smallest breakpoint.

Additionally you can set the width of other columns in this row as well, or leave them set to auto and they will adjust their widths to fill out the remaining area not occupied by this column.

The Ordering setting allows us to determine in which order, from left to right, that individual columns are shown. The basic setting allows us to determine whether an individual item comes first or last in the layout. This is uniformly applied at the Medium, Larger, Extra Large and Extra Extra Large breakpoints. It reverts to the natural order at the Small and Extra Small breakpoints.

By clicking the small + icon above this setting we get more granular control over the ordering. You're able to adjust ordering at each individual responsive breakpoint. Instead of only being able set it to first and last, you're now able to choose from 6 different positions, from left to right in order.

The Offset setting is the number of units (out of 12) that the column will be indented, from the left side, in that particular Columns tool.

By clicking the small + icon above this setting we get more granular control over the offset. You're able to adjust offset at each individual responsive breakpoint.

Here we can adjust the vertical alignment of content within an individual child item. By clicking the small + icon above this setting you can opt to adjust the content alignment at each responsive breakpoint.

Content Alignment deals with the elements placed within the columns. The columns remain their same height.

This, of the two vertical alignment features, will be the one you'll most often turn to when adjusting the vertical alignment.

This setting will override the vertical content alignment of the parent tool.

Here we can adjust the vertical alignment of indiviual column itself. By clicking the small + icon above this setting you can opt to adjust the column alignment at each responsive breakpoint.

Column Alignment changes the height of the columns themselves. This one will be used far less often than the Content Alignment option.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Provides a way to insert a break in the layout, forcing the start of a new row of columns.

Here you can choose at which breakpoints that the column row break will be applied.

Column breaks have a small amount of Margin applied to them by default for styling purposes. You can disable this feature to remove this added Margin on the Column break.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.