pelicin › web › CSS

Column

These properties configure how text columns are rendered.

Column Properties

columns

Shorthand for column-count and column-width

div {
  /* <column-count> <column-width> */
  columns: 2;
  columns: 100px;
  columns: 2 auto;
}

column-count

Sets the number of columns (can end up being less).

Possible values:

  • auto — will use other CSS properties, e.g. column-width
  • a number — e.g. 2
<div id="column-count-example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.
</div>
#column-count-example {
  column-count: 4;
}
| LIVE PREVIEW
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.

column-width

Sets the minimum column width. It will create as many columns as possible.

Possible values:

  • auto — will use other CSS properties, e.g. column-count
  • a length — e.g. 100px; sets the minimum column width (it can be larger to fill the remaining space

column-gap

Sets the gap between columns. Specify:

  • normal — use the browser's default spacing
  • a length — e.g. 1em
  • a percentage — e.g. 100px, relative to the parent's width

column-fill

Sets how to distrbute the column's content. (Only makes sense if you enforce the parent's height.)

  • auto — fill one column at a time (some columns may remain empty)
  • balance — attempt to divide the content between columns
| LIVE PREVIEW

auto fills one column at a time

"balance" attempts to balance the amount of content in each column

column-span

Makes an element span all columns when you set column-span: all.

Only works for block-level elements (?). When the element spans all columns, the content before it will be balanced equally.

Specify none or all.

<div id="column-span-example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  <div class="span-all">Hello hello!</div>
  Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.
</div>
#column-span-example {
  column-count: 3;
}
#column-span-example .span-all {
  column-span: all;
  background-color: gold;
}
| LIVE PREVIEW
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Hello hello!
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.

Column Rule Properties

column-rule

Shorthand for column-rule-width, column-rule-style, column-rule-color. (You can specify each one optionally. The order does not matter.)

The "rule" is only created when necessary. If a column next to it is empty, no rule will be drawn in-between.

#column-rule-example {
  column-count: 3;
  column-rule: 1px solid red;
}
| LIVE PREVIEW
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.

column-rule-width

Sets the width of column rule.

column-rule-style

Sets the style of column rule.

Like border property (see here), specify one of: none, hidden, dotted, dahsed, solid, double, groove, ridge, inset, outset.

column-rule-color

Sets the color of column rule.

References