6XC

Generatore di Colonne CSS

Fai scorrere il testo in colonne stile giornale — numero, spaziatura e linea divisoria — con anteprima dal vivo e CSS.

794 visualizzazioni

Il layout multi-colonna fa scorrere un testo lungo fianco a fianco come in una pagina di giornale. Cambia il numero e la spaziatura e osserva questo testo di esempio riorganizzarsi all'istante. Attiva la linea per disegnare un sottile divisore tra le colonne. Negli articoli lunghi accorcia la lunghezza delle righe, rendendo la lettura più facile. Il layout multi-colonna fa scorrere un testo lungo fianco a fianco come in una pagina di giornale. Cambia il numero e la spaziatura e osserva questo testo di esempio riorganizzarsi all'istante. Attiva la linea per disegnare un sottile divisore tra le colonne. Negli articoli lunghi accorcia la lunghezza delle righe, rendendo la lettura più facile.

Layout Multi-Colonna in CSS

column-count divide il contenuto di un blocco in colonne uguali stile giornale; column-gap imposta lo spazio tra loro e column-rule disegna una linea divisoria (stessa sintassi di border). Il testo scorre automaticamente da una colonna all'altra — ideale per articoli lunghi, footer e elenchi indice. Usa break-inside: avoid sugli elementi che non vuoi vedere divisi tra le colonne.

Domande Frequenti

column-count o column-width?

column-count fissa il numero di colonne; column-width lascia che il browser inserisca il maggior numero possibile di colonne di almeno quella larghezza — meglio per i layout responsivi. Puoi usare entrambe insieme.

Come evito che un elemento venga diviso tra le colonne?

Assegnagli break-inside: avoid; — utile per card, immagini con didascalia ed elementi di lista.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Ombre CSS (Box Shadow) Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera