There are three column-breaking properties to define where column breaks should appear. The
break-before,
break-after, and
break-inside properties take a limited number of key terms as values to define whether a column break can and should occur before, after, or inside an element, respectively. Rather than being applied to the same element on which we defined our primary column properties, they’re applied to other elements nested inside it.
The values available are the same as for
page-break-after,
page-break-before, and
page-break-inside in CSS 2.1: auto, always, avoid, left, and right.
CSS3 also adds a few new possible values for these properties:
page,
column,
avoid-page, and
avoid-column. The page and column values function like always, and will force a break. The difference is that page will only force page breaks and column applies only to columns. This gives you a bit more flexibility in how you manage breaks.
avoid-page and
avoid-column are similar, except that they function like avoid.
For example, you might want to avoid a column break occurring immediately after an h2 element in your content.
snippet
.columns {
column-count: 3;
column-gap: 5px;
}
.columns h2 {
break-after: avoid;
}Example
snippet
-webkit-column-break-after: always;
-webkit-column-break-before: auto;
-webkit-column-break-inside: never;
