Columns

Use this to arrange the content of every direct sub object in separate columns in a flexible column layout with one or multiple rows.

The layout and widths can be set exactly as needed.

The columns can even act in a responsive way. Responsive means, that you can set different column width rules for different screen sizes. For instance, this allows you to show columns stacked on top of each other on a smartphone.

Columns can also be nested, so one column can contain another columns layout inside it.

The different types of column widths are:

  • fractions, eg 1/4, 1/3, 1/2
  • percentages, eg 25%, 33.3333%, 50%
  • css lengths, eg 200px, 30rem, 10vw
  • 0 or "hide" value
  • "auto" value
  • "expand" value
  • integers for relative expand widths, eg 1, 2, 3
  • css calc() functions, eg calc(100% - 200px)
Click here to read the detailed documentation for the columns logic

Detailed documentation

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%.

The default: Expand columns in large and medium windows and 100% in small and mini

expand 100pct

Row with 1 item

ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%

Row with 2 items

ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%

Row with 3 items

ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%

...

Row with 7 items

ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%
ex­p­a­n­d
ex­p­a­n­d
10­0­%
10­0­%

Alignment of rows

Left aligned

3/­5
3/­5
3/­5
3/­5
1/­5
1/­5
1/­5
1/­5
2/­5
2/­5
2/­5
2/­5

Centered

3/­5
3/­5
3/­5
3/­5
1/­5
1/­5
1/­5
1/­5
2/­5
2/­5
2/­5
2/­5

Right aligned

3/­5
3/­5
3/­5
3/­5
1/­5
1/­5
1/­5
1/­5
2/­5
2/­5
2/­5
2/­5

Auto - fit column to content

Left aligned

au­t­o
au­t­o
au­t­o
au­t­o

Semi long text

au­t­o
au­t­o
au­t­o
au­t­o

Short

au­t­o
au­t­o
au­t­o
au­t­o

This is a long text, this is a long text

au­t­o
au­t­o
au­t­o
au­t­o

citrus

au­t­o
au­t­o
au­t­o
au­t­o

citrus

Right aligned

au­t­o
au­t­o
au­t­o
au­t­o

Semi long text

au­t­o
au­t­o
au­t­o
au­t­o

Short

au­t­o
au­t­o
au­t­o
au­t­o

This is a long text, this is a long text

au­t­o
au­t­o
au­t­o
au­t­o

citrus

au­t­o
au­t­o
au­t­o
au­t­o

citrus

Combined with expand and fixed pixel column

ex­p­a­n­d
ex­p­a­n­d
ex­p­a­n­d
ex­p­a­n­d
au­t­o
au­t­o
au­t­o
au­t­o
au­t­o
au­t­o
au­t­o
au­t­o
10­0­p­x
10­0­p­x
10­0­p­x
10­0­p­x

Forced row break

1/­3
1/­3
1/­3
1/­3
ex­p­a­n­d­-­b­r
ex­p­a­n­d­-­b­r
ex­p­a­n­d­-­b­r
ex­p­a­n­d­-­b­r
1/­2
1/­2
1/­2
1/­2
au­t­o­-­b­r
au­t­o­-­b­r
au­t­o­-­b­r
au­t­o­-­b­r
25­%
25­%
25­%
25­%
67­%­-­b­r
67­%­-­b­r
67­%­-­b­r
67­%­-­b­r
1/­2
1/­2
1/­2
1/­2
1/­4­-­b­r
1/­4­-­b­r
1/­4­-­b­r
1/­4­-­b­r
50­p­x
50­p­x
50­p­x
50­p­x
12­5­p­x­-­b­r
12­5­p­x­-­b­r
12­5­p­x­-­b­r
12­5­p­x­-­b­r
10­0­%
10­0­%
10­0­%
10­0­%
1/­1
1/­1
1/­1
1/­1
20­0­0­p­x
20­0­0­p­x
20­0­0­p­x
20­0­0­p­x

Widths set for individual column objects

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Different column spacing

20px space

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

16 9 ducks

16 9 red kite

65px space

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

16 9 ducks

16 9 red kite

small space (depends on template settings)

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

16 9 ducks

16 9 red kite

medium space (depends on template settings)

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

16 9 ducks

16 9 red kite

large space (depends on template settings)

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

16 9 ducks

16 9 red kite

hide / 0 (collapses space)

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

16 9 ducks

16 9 red kite

Different space dependent on viewport

(now it is 80px)
(now it is 40px)
(now it is 20px)
(now it is 10px)

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

16 9 ducks

16 9 red kite

Multiple items in single column

3/­4­, 3 i­t­e­m­s

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

citrus

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

1/­4­, 4 i­t­e­m­s

avocado

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

lemon

sunflower

Columns can contain all kinds of content

Columns can contain all kinds of content, so the below are just a few examples.

citrus

Image

Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

Standard Teaser

This is a standard teaser. Nullam quis risus eget urna mollis ornare vel eu leo.

Video thumbnail

[Add a news list here!]

Gallery

Sliders

Nested columns

1/­3
1/­2
1/­2
10­0­%
2/­3
1/­2
1/­2
10­0­%

This is some long paragraph style text. Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet. This is some long paragraph style text. Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet. This is some long paragraph style text. Pat perei ta senes viderit, nos, Pala L. Si signonsus estra ips, nostum is oc in sendam horum atus ium consicia imis patus. Ipse consul hos iaet.

lemon

citrus

avocado

citrus

lemon