column-count

column-count: 2;

column-count: 3;

column-count: 4;

column-count: auto;
column-width: 8rem;

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

#example-element {
  width: 100%;
  text-align: left;
}

/* キーワード値 */
column-count: auto;

/* <integer> 値 */
column-count: 3;

/* グローバル値 */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;

<p class="content-box">
  これは、 CSS の <code>column-count</code> プロパティを使用して 3 段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>

.content-box {
  column-count: 3;
}