column-fill

column-fill: auto;

column-fill: balance;

<section id="default-example">
  <p id="example-element">
    ロンドン。ミカエルマス学期が終わり、リンカーンズ・イン・ホールで大法官が座っています。容赦のない 11 月の天候です。
  </p>
</section>

#example-element {
  width: 100%;
  height: 90%;
  columns: 3;
  text-align: left;
}

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

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

<p class="fill-auto">
  この段落では、段を 1 つずつ埋めていきます。すべてのテキストが最初の段に収まるので、他の段は空白になります。
</p>

<p class="fill-balance">
  この段落では、それぞれの段でコンテンツの量のバランスを取ろうとします。
</p>

p {
  height: 7em;
  background: #ffff99;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}