HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>column-fill balance vs auto</title>
  <style>
    p {
      height: 7em;
      columns: 3;
      column-rule: 1px solid;
    }
    .balance {
      column-fill: balance;
    }
    .auto {
      column-fill: auto;
    }
  </style>
</head>
<body>
  <p class="balance">
    Balance: content is spread across columns.
  </p>
  <p class="auto">
    Auto: columns fill in order, so later ones may stay empty.
  </p>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS column-fill Property — balance vs auto