`columns (layout pe mai multe coloane)` în CSS

Împarte textul unui element în mai multe coloane, ca într-un ziar, cu spațiu și linie între ele.

Sintaxă CSS

columns: 3;              /* column-count */
columns: 18rem;          /* column-width */
columns: 18rem 3;        /* lățime minimă + număr maxim */
column-gap: 2rem;
column-rule: 1px solid #e2e8f0;
column-span: all;
break-inside: avoid;

Ce face `columns (layout pe mai multe coloane)`

Layout-ul pe mai multe coloane (multi-column) curge conținutul de sus în jos în prima coloană, apoi continuă în a doua, și tot așa. Este potrivit pentru text lung, liste de linkuri sau glosare, nu pentru structura paginii.

column-width dă o lățime minimă dorită: browserul pune câte coloane încap, deci layout-ul devine responsiv fără media queries. column-count fixează numărul de coloane. Shorthand-ul columns le acceptă pe amândouă.

column-rule desenează o linie între coloane (sintaxă ca la border), column-span: all face un titlu să treacă peste toate coloanele, iar break-inside: avoid împiedică ruperea unui bloc (card, figură) între două coloane.

Valori uzuale

Valoare	Descriere
`column-count`	Numărul de coloane (ex. 3).
`column-width`	Lățimea minimă dorită a unei coloane (ex. 16rem).
`column-gap`	Spațiul dintre coloane (implicit 1em).
`column-rule`	Linia dintre coloane: grosime, stil, culoare.
`column-span: all`	Elementul (de obicei un titlu) se întinde peste toate coloanele.
`break-inside: avoid`	Nu rupe elementul între două coloane.

Exemple

Exemplul 1: Listă lungă de orașe, în coloane responsive

Pe ecran lat apar 4 coloane, pe telefon una singură, fără nicio media query.

.lista-orase {
  columns: 12rem;
  column-gap: 2rem;
  column-rule: 1px solid #e2e8f0;
}

Efect vizual în browser

Lista (Alba Iulia, Arad, Bacău, …, Iași, …, Zalău) curge pe 4 coloane pe un monitor de 1200px, pe 2 coloane pe tabletă și pe o singură coloană pe telefon, cu o linie gri fină între coloane.

Exemplul 2: Carduri de rețete care nu se rup între coloane

Fiecare rețetă rămâne întreagă într-o singură coloană, iar titlul secțiunii stă deasupra tuturor.

.retete {
  column-count: 3;
  column-gap: 24px;
}
.retete h2 {
  column-span: all;
}
.reteta {
  break-inside: avoid;
  margin-bottom: 24px;
}