columns

columns: 2;

columns: 6rem auto;

columns: 12em;

columns: 3;

<section id="default-example">
  <p id="example-element">
    ロンドン。ミカエル学期の終わり、リンカーンズ・イン・ホールに大法官が座っています。容赦のない 11 月の天候。街は、まるで地球から水が引き始めたばかりのように泥だらけで、ホルボーン・ヒルを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。
  </p>
</section>

#example-element {
  min-width: 21rem;
  text-align: left;
}

/* 段の幅 */
columns: 18em;
/* 段数 */
columns: auto;
columns: 2;
/* 段の幅と段数の両方 */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* グローバル値 */
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;

<p class="content-box">
  これは、 CSS の `columns` プロパティを使用して 3 つの列に分割されたテキストの束です。テキストは各カラムに均等に配置されている。
</p>

.content-box {
  columns: 3 auto;
}