CSS multi-column utilities: columns-1 through columns-12, break control and box-decoration-break. This family contains 48 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
break-before-autobreak-before: auto;
break-before-avoidbreak-before: avoid;
break-before-allbreak-before: all;
break-before-avoid-pagebreak-before: avoid-page;
break-before-pagebreak-before: page;
break-before-leftbreak-before: left;
break-before-rightbreak-before: right;
break-before-columnbreak-before: column;
break-inside-autobreak-inside: auto;
break-inside-avoidbreak-inside: avoid;
break-inside-avoid-pagebreak-inside: avoid-page;
break-inside-avoid-columnbreak-inside: avoid-column;
break-after-autobreak-after: auto;
break-after-avoidbreak-after: avoid;
break-after-allbreak-after: all;
break-after-avoid-pagebreak-after: avoid-page;
break-after-pagebreak-after: page;
break-after-leftbreak-after: left;
break-after-rightbreak-after: right;
break-after-columnbreak-after: column;
columns-1columns: 1;
columns-2columns: 2;
columns-3columns: 3;
columns-4columns: 4;
columns-5columns: 5;
columns-6columns: 6;
columns-7columns: 7;
columns-8columns: 8;
columns-9columns: 9;
columns-10columns: 10;
columns-11columns: 11;
columns-12columns: 12;
columns-autocolumns: auto;
columns-3xscolumns: 16rem;
columns-2xscolumns: 18rem;
columns-xscolumns: 20rem;
columns-smcolumns: 24rem;
columns-mdcolumns: 28rem;
columns-lgcolumns: 32rem;
columns-xlcolumns: 36rem;
columns-2xlcolumns: 42rem;
columns-3xlcolumns: 48rem;
columns-4xlcolumns: 56rem;
columns-5xlcolumns: 64rem;
columns-6xlcolumns: 72rem;
columns-7xlcolumns: 80rem;
box-decoration-slicebox-decoration-break: slice;
box-decoration-clonebox-decoration-break: clone;

Example#

example
html
<article class="columns-2 gap-8 [&>p]:break-inside-avoid">
  <p>Long-form text flows into two columns…</p>
</article>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • break-inside-avoid keeps cards whole inside columns
  • Column counts respond to breakpoints: columns-1 md:columns-2 lg:columns-3

Common mistakes#

  • Expecting column layout to behave like grid — content flows top-to-bottom per column

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive