CSS column-fill Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Layout */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #f5f6f7;
    padding: 28px;
}

.examples {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.column-box {
    width: 360px;
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.column-box h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.2;
    color: #111827;
}

/* Column content common settings */
.column-content {
    column-count: 3;
    column-gap: 16px;
    height: 170px; /* fixed height to show the difference between auto and balance */
    overflow: auto;
}

.column-content p {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #374151;
}

/* Demonstrate both values of column-fill */
.column-box.auto .column-content {
    column-fill: auto;
}

.column-box.balance .column-content {
    column-fill: balance;
}

/* Prevent headings or other elements from being split across columns if inserted */
.column-content > * {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}
</style></head><body><div class="examples">
    <div class="column-box auto">
        <h3>column-fill: auto</h3>
        <div class="column-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
            <p>Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl.</p>
            <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere neque metus vitae est.</p>
            <p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</p>
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.</p>
            <p>Nulla facilisi. Donec id justo. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
        </div>
    </div>

    <div class="column-box balance">
        <h3>column-fill: balance</h3>
        <div class="column-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
            <p>Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl.</p>
            <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere neque metus vitae est.</p>
            <p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</p>
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.</p>
            <p>Nulla facilisi. Donec id justo. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
        </div>
    </div>
</div></body></html>