Simple newspaper columns

Use the column-width property to display lists in columns that flow like newspaper stories.

Here’s an example:

• Abyssinian

• American Shorthair

• Arabian Mau

• Bengal

• Calico

• Chartreux

• Himalayan

• Korat

• Maine Coon

• Manx

• Minuet

• Norwegian Forest Cat

• Persian

• Ragdoll

• Siamese

• Snowshoe

• Tortoiseshell

• York Chocolate

To learn more, including how to style the columns, see Multiple-column layout (Mozilla developer).

Inline examples

Here, the list is specified using an inline style parameter applied to an unordered list (<ul>) element.

• HTML
• Markdown

<ul style="column-width: 15em;">
<li>Abyssinian</li>
<li>American Shorthair</li>
<li>Arabian Mau</li>
<li>Bengal</li>
<li>Calico</li>
<li>Chartreux</li>
<li>Himalayan</li>
<li>Korat</li>
<li>Maine Coon</li>
<li>Manx</li>
<li>Minuet</li>
<li>Norwegian Forest Cat</li>
<li>Persian</li>
<li>Ragdoll</li>
<li>Siamese</li>
<li>Snowshoe</li>
<li>Tortoiseshell</li>
<li>York Chocolate</li>

- Abyssinian
- American Shorthair
- Arabian Mau
- Bengal
- Calico
- Chartreux
- Himalayan
- Korat
- Maine Coon
- Manx
- Minuet
- Norwegian Forest Cat
- Persian
- Ragdoll
- Siamese
- Snowshoe
- Tortoiseshell
- York Chocolate
{ style:"column-width: 15em;"}

If you’re using a static site generator that implements CommonMark or other Markdown extensions, you might be able to achieve the same result using Markdown.

Hugo support

Sites based on Hugo need to activate block level support for the Markdown attributes extension.

Vital statistics

• 23 May 2024: First post