^Layout Text columns

Auto-columns #

.columns automatically creates columns with at least 30 characters each:

The smaller the font size, the more columns will be created:

Useful for tables of contents and long lists.

How it works:

.columns {
  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */

  /* Avoid breaking inside elements, such as nested lists */
  > * {
    break-inside: avoid;
  }
}