A Column can only be placed inside a Container element, and it will always base its divisions on the parent container’s width. Most of the time, this will be the Site Width you’ve set for the site. For example, if you’ve set the Site Width to be 1200px, then a 1/2 column will be 600px wide, minus any column spacing you’ve set. Below you can see the possible preset Column sizes when added to the page.
1/1 – A one whole column is 100% of its container.
5/6 – A five sixth column is 83.33% of its container.
4/5 – A four fifth column is 80% of its container.
3/4 – A three fourth column is 75% of its container.
2/3 – A two third column is 66.66% of its container.
3/5 – A three fifth column is 60% of its container.
1/2 – A one half column is 50% of its container.
2/5 – A two fifth column is 40% of its container.
1/3 – A one third column is 33.33% of its container.
1/4 – A one fourth column is 25% of its container.
1/5 – A one fifth column is 20% of its container.
1/6 – A one sixth column is 16.66% of its container.
Preset Sizes or Custom Width
Columns can have a preset size as above, but they can also have a custom width. Back in Avada 7.0, we introduced Custom Widths for Columns, as well as the ability to set column widths (and more) independently on large, medium and small layouts. For more information on how to use this feature with Columns, please read the How To Set The Display Order And Size Of Columns In Responsive Layouts doc.
You will find Custom Widths under Columns > Design > Width. As seen below, you can click on Use Custom Width, which allows you to set a Custom Width using any valid CSS unit. A percentage value is the default, but you can also set a pixel value, or any other valid CSS unit. This gives ultimate freedom of column sizing.
Flex Grow & Flex Shrink Options
Under this, you will also find two options called Flex Grow and Flex Shrink. These are useful when the sum of your columns do not add up to 100%. With these values, you can let the browser know how to distribute the remaining space.
Flex-grow tells your column whether or not it can take up additional space within its wrapping container. Initially, the option will be empty, which means a default value of 0, and thus the column will not grow to take up any available space. With a value of 1 or higher, we are telling the column to grow and to take up the available space.
It’s easiest to explain this with an example. Let’s say you have three columns of 1/4 width. This means they take up seventy five percent of the container. If nothing is set, then the columns will not grow and remain at 1/4 each, but if they all get a flex-grow value of 1, the remaining twenty five percent is distributed equally among all three columns (an extra 8.333% for each one). But if you set a value of one on the first and third column, but a value of two in the middle column, then the browser would divide the remaining space by four (25% / 4 = 6.5%) and apply two units to the second column (13%) while the first and thrid column would only grow by one unit (6.5%).
This option only works if the parent container’s Content Wrap value is set to No Wrap. By default the containers are set to wrap, so if the columns take up too much space, the last one will simply be pushed to a new row. But, when Content Wrap is turned off, all columns are forced to stay on the same row. That could lead to overflow, when there are some elements in the columns that can’t be reduced in width.
So, the Flex Shrink factor, similarly to Flex Grow, lets the browser decide which columns can shrink more than others. Initially all columns have a factor of 1, so if you set one of them to e.g. 2, it can shrink twice as much as the others.
Another important value is a Flex Shrink value of 0, which means the column must not shrink at all. For example, if you use a px width column, that will make sure, that regardless of available space, that column will always remain at its set px width. If Flex Grow is set on the same column, then it won’t shrink more than the overall width of its content.
There is also a new width option called Auto. With this selected, instead of a fixed width size, the column will take up the space of the largest element inside it that has a set width. So it will only work in certain instances. But any time you have an Element that has a set width, such as an image or an icon etc, you can set the parent Column to Auto, and the Column will resize to the width of the Element.
Examples of Auto Width
On the Home page of the Pet Supplies Website, there is a banner at the bottom of the Page Title Bar, with an image of some pet food, and some text. This becomes a sticky container as you scroll up, and the image has a Image Sticky Max Width that reduces its size as the Container becomes sticky. This image is in a Column set to Auto, so that the Column also resizes with the image, and so the spacing between it and the text next to it remains the same.