Columns

If only a single width has been entered, this width is applied to all columns. Eg "1/4" will result in a layout with four equally sized columns per row.

Multiple widths can be entered separated by whitespace, comma or semicolon, eg "1/4 1/2 1/4" or "1/4; 1/2; 1/4". The first width is applied to the first column, the second to the second column, and so on. If there are less columns than entered widths, the remaining widths will simply be ignored. If there are more columns than entered widths, the width sequence is repeated, eg "1/4 3/4" corresponds to "1/4 3/4 1/4 3/4 1/4 3/4 ..."

Columns are floated besides each other within the same row. Once the remaining space within the row is too small for the next column, that column starts a new row.

It is also possible to force a new row by adding "-br" as suffix to the width of the column after which the row should break. Eg "1/2-br 1/2 1/4 1/4" results in a single column in the first row filling half the width (1/2), while there are three columns (1/2 1/4 1/4) in the second row.

Fractions are converted to percentages. In other words, 1/2 is the very same as 50%.

Percentages are always relative to the total width of the row, which again depends on the container inside which the columns have been added. As the row width often changes fluidly dependent on the viewport size of the browser, the absolute pixel widths of columns defined as fraction or percentage may also change.

Be aware, that a 1/2 column is not just twice the width of a 1/4 column or four times the width of 1/8 column. That is because all gaps between the corresponding numbers of columns of smaller size are also considered. That way even columns of different size always align perfectly like in a newspaper layout.

When a column width is set as css length, the length is used for the inner width of the column. That way you always know exactly what width is applied to the content of that column. However, in some cases this also means, you have to remember to add the column spacing in your calculations. For instance, this is the case if you want to make sure that multiple columns with css length widths result in a specific total row width. If you are using css lengths in calc() functions you also often have to remember to specifically include the column spacing.

Entering 0 or "hide" will collapse a column and thus hide the content inside it. Technically the content still exists and may even reappear if a browser resize triggers another responsive width.

The "auto" value adjusts the column to fit exactly the content inside it. One case where this is very useful is, if you want to ensure the same fixed space between several content items.

The "expand" value stretches a column to fill the remaining space within its row. If multiple columns use "expand" within the same row, the available space is divided equally between them. If you want to ensure equal size columns within one row regardless of the number of columns, the most easy approach is just entering "expand" once, as this will then be repeated eternally like "expand expand expand expand expand".

Entering the integer number 1 without any css unit does exactly the same as "expand". Entering larger numbers assigns relatively more space to a column. So "1, 2, 1" ensures, that the column with width 2 is twice as large as the columns with width 1. Like for fractions and percentages, the gaps from the column spacing are also considered, eg 2 = 1 + gap + 1. Integers for relative expand widths are especially useful if you want to ensure that columns are always kept inside a single row regardless of the number of columns while at the same time allowing some of the columns to be relatively larger than other columns.

The css calc() function allows calculating widths using any css length values together with the +, -, *, and / operators. The + and - operators have to be surrounded with whitespace, because else they cannot be told apart from positive and negative values. Use parentheses to establish computation order when needed. You can combine values with different css units in your expression (eg "100% - 200px"). In multiplications at least one of the arguments must be a number with no unit. In divisions the right-hand side must be a number with no unit. One case, where you can use calc is to calculate remaining width in a row. For instance, if you have two columns, where the first is 200px wide, the column spacing is 20px, and you want the second to fill the remaining width, you can do so by writing "200px; calc(100% - 200px - 20px)". However, mostly it is easier just to write "200px; expand".

In most cases the different types of column widths can be combined, eg "1/2 expand 200px". Note however that inside a calc() function you cannot use fractions, the "hide"/"auto"/"expand" values, relative expand sizes, and the "-br" suffix.

If a column width is greater than 100%, it will automatically be reset to 100%.