CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS column-span

La proprietà CSS3 column-span permette a un elemento di estendersi su tutte le colonne

La proprietà column-span è parte del modulo CSS3 Multi-column Layout e consente a un elemento di ignorare la divisione in colonne del contenitore, estendendosi su tutte. È utile per titoli, sottotitoli o elementi decorativi all'interno di layout multi-colonna.

Sintassi

column-span: none | all;

Significato dei valori principali:

  • none: (valore predefinito) l'elemento non si estende oltre la colonna in cui si trova.

  • all: l'elemento si estende su tutte le colonne del contenitore multicolonna.


Esempio proprietà: column-span


Codice Esempio: column-span

CODE: CSSpreleva codice
  1. .multicol-container {
  2.   column-count: 3;
  3.   column-gap: 20px;
  4.   padding: 20px;
  5.   background-color: #fafafa;
  6. }
  7.  
  8. .column-span-header {
  9.   column-span: all;
  10.   background-color: #50a14f;
  11.   color: white;
  12.   padding: 10px;
  13.   font-size: 20px;
  14.   text-align: center;
  15.   margin-bottom: 15px;
  16.   border-radius: 6px;
  17. }
  18.  
  19. .column-content {
  20.   font-size: 16px;
  21.   line-height: 1.6;
  22. }

Contenuto Esempio: column-span

Esempio di utilizzo di column-span

In questo esempio, un titolo si estende su tutte le colonne grazie a column-span: all;:


Titolo che si Estende su Tutte le Colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel velit a justo volutpat tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Fusce quis lectus ut justo porttitor cursus. Sed posuere arcu eget tincidunt fermentum. Etiam sit amet urna in metus porttitor posuere.

CSS e HTML per l'esempio:

  
  <style>
    .multicol-container {
      column-count: 3;
      column-gap: 20px;
      padding: 20px;
      background-color: #fafafa;
    }

    .column-span-header {
      column-span: all;
      background-color: #50a14f;
      color: white;
      padding: 10px;
      font-size: 20px;
      text-align: center;
      margin-bottom: 15px;
      border-radius: 6px;
    }

    .column-content {
      font-size: 16px;
      line-height: 1.6;
    }
  </style>

  <div class="multicol-container">
    <div class="column-span-header">Titolo che si Estende su Tutte le Colonne</div>
    <div class="column-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies