Come creare colonne con column-count in CSS3!

Giovanni Canella

29/11/2013

3917

Oggi nuovo articolo, per continuare il viaggio alla scoperta delle potenzialità che ci offre CSS3, dove andrò a spiegarvi come creare creare delle colonne con il solo utilizzo dei fogli di stile, per l'impaginazione dei contenuti, in stile "giornalistico"!

Ebbene si, tutto questo è ora possibile tramite poche righe di stile dove, a differenza di alcuni anni fa per risolvere questo problema, l'unico metodo era l'uso delle tabelle; che come sappiamo tutti sono da evitare assolutamente nella costruzione del layout, per i seguenti motivi:

  1. Contenuti separati in modo inefficiente dalla struttura,
  2. Presenza di codice rindondante,
  3. Scarso supporto per le persone che presentano qualche handicap.

anche se tutt'oggi si vedono in giro siti, che adottano questo tipo di struttura. In ogni caso, senza divagare troppo in questo discorso, le tabelle andrebbero utilizzate solamente per impaginare dati e/o informazioni.

DEMO

Come creare colonne multiuso CSS3! 

Quindi innanzitutto creiamo la nostra index.html, con una struttura base, e come riempiamola con del contenuto di prova


<!DOCTYPE html>
<html lang="it">
<head>
	<meta charset="UTF-8" />
	<title>CSS Selectors</title>	
</head>
<body>
	<h1>Colonne CSS3! [Ginho.it]</h1>
	<div id="contenitore">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris erat justo, lacinia ac iaculis et, iaculis vehicula leo. Donec pharetra odio quis ipsum ultricies egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium massa quis blandit rhoncus. Ut quis risus volutpat, luctus sem sed, fermentum libero. Vivamus vehicula, dui ut posuere adipiscing, nibh elit consequat magna, a blandit erat felis venenatis magna. Aliquam interdum, neque eu convallis pulvinar, dolor est mollis risus, ac rutrum libero ipsum nec ipsum. Integer rhoncus eros dui, ac adipiscing odio feugiat ac. Mauris pellentesque elementum leo sed blandit. Morbi eleifend, lorem id cursus blandit, lorem ante facilisis turpis, eu pharetra libero nulla a est. Etiam feugiat nisi mi, in tempor nulla volutpat ut. Aenean tincidunt, sem vel suscipit suscipit, nulla lectus tempus mi, ut venenatis neque dolor in mauris. In vel tincidunt ante. Etiam facilisis, justo sit amet vestibulum semper, neque dolor ultricies odio, luctus ultrices risus lorem vel ligula. Nullam gravida rutrum odio sed dignissim. Fusce nec augue accumsan, aliquam ante vel, tempor erat.
		Praesent dignissim justo quis tincidunt bibendum. Proin at ornare tellus. Nulla a nisi eget purus iaculis consectetur auctor accumsan massa. Maecenas sed urna eu velit tincidunt dignissim. Sed dictum, dui ut euismod mollis, turpis nisl aliquet ligula, sit amet tempor ante nisl sed ipsum. Nunc adipiscing, purus sit amet accumsan congue, orci magna ultrices sem, tempor vehicula eros velit ac risus. Curabitur id massa lectus. Morbi pulvinar tortor lectus, commodo malesuada nisi pharetra sed. Vivamus varius placerat tortor, a ornare velit tincidunt scelerisque. Nullam dapibus dignissim malesuada.
		Fusce eu est quis erat elementum mollis. Mauris mi dui, viverra in eleifend dapibus, sodales quis ante. Vivamus semper, neque non semper luctus, tortor sem pulvinar velit, volutpat aliquet nulla est ut quam. Vestibulum imperdiet sem hendrerit dignissim vestibulum. Maecenas non odio vitae tellus scelerisque facilisis vitae quis tellus. Sed ac tincidunt elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sodales velit ac lorem consectetur porta. Etiam blandit mattis augue ut condimentum. Sed elit orci, luctus in dictum vitae, fringilla sit amet massa. Pellentesque auctor lorem a lectus imperdiet, eget semper ante lacinia. Nunc malesuada, diam id sollicitudin euismod, mi nisi laoreet est, et euismod diam elit nec dolor. Morbi urna dolor, faucibus lobortis tempor id, porta quis turpis. Proin eget libero mi. Donec eget turpis lacinia, convallis velit vitae, luctus risus.
		Nam et velit in diam dictum vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam iaculis nisl sit amet consequat congue. Vestibulum vulputate euismod arcu, quis condimentum augue vestibulum eget. Suspendisse potenti. Mauris in dictum sapien, vulputate rhoncus enim. Vestibulum tempor tristique scelerisque. Donec venenatis risus at metus eleifend, sit amet auctor mi interdum. Sed pretium nisi et iaculis condimentum. Morbi dolor diam, dignissim vel pellentesque nec, sodales a orci.
		Donec consequat augue consectetur, ultricies justo non, dictum erat. Curabitur nec leo sapien. Curabitur et feugiat nisi. Sed cursus, velit eu blandit cursus, risus lacus faucibus leo, sit amet hendrerit lectus tellus eu dui. Integer semper accumsan nulla, et vulputate lectus auctor eu. Maecenas sollicitudin elit facilisis, eleifend nunc in, tristique quam. Quisque vel convallis nisi. Sed varius est elit, quis feugiat nulla vulputate nec. Donec vulputate dictum magna in adipiscing. Aenean lectus lacus, dignissim a iaculis sed, varius non arcu. Nulla purus sapien, dictum consequat imperdiet vel, dignissim quis risus. Praesent pellentesque metus a ipsum gravida ornare.
	</div>
</body>
</html>

 

Aggiungiamo lo stile CSS:

* {
	font-family: Arial, Helvetica, sans-serif;
}
	
#contenitore {
	text-align: justify;
	-webkit-column-width: 300px;
	-webkit-column-gap: 25px;
	-webkit-column-rule: 2px solid #000;
}
		
body {
	margin: 30px;
}

Dove abbiamo definito:

  1. 30px di magine per il body,
  2. Carattere della pagina
  3. Proprietà per dividire il contenitore in colonne: column-count.
-webkit-column-count: 3;

N.B = Da notare l'uso del prefisso -webkit-, usato per farlo funzionare su browser che si appaggiano a quel motore di rendering (Google Chrome, Safari ecc), mentre potete aggiungere -moz-, per Geeko (Firefox). Per Internet Explorer il discorso è un po' dolente, infatti supporta questa proprietà solamente dalla versione 10 in poi. Ecco un link con una tabella contenente maggiori informazioni.

Dovremmo ottenere un risultato simile al seguente:

Primo esempio layout colonne

Inoltre è possibile anche specificare il gap, lo spazio fra colonna e colonna, che più desideriamo, per offrire all'utente una maggiore comodità di lettura: infatti se i testi sono praticamente attaccati, ci si può confondere facilmente, rendendo la lettura meno scorrevole. La proprietà interessata è column-gap.

column-gap: 20px;

Column-gap: CSS3

Buona norma è anche giustificare il testo:

text-align: justify;

per avere un contenuto più uniforme. 

Ecco una descrizione delle proprietà fondamentali:

column-width

Per impostare una lunghezza che noi desideriamo delle colonne, e lasciare al browser di decidere quante inserirne in base allo spazio che andranno ad occupare. Per esempio se inseriamo 300px, ci verranno create automaticamente 4 colonne (con un monitor di risoluzione 1366x768). Di default è settato su auto, così da far decidere la grandezza ottimale da altre proprietà (column-count).

column-count

Come visto prima, dichiara quante colonne inserire, senza tenere conto della loro lunghezza: quindi quando si usa questa non si usa column-width, e viceversa. Infatti non sortirebbe alcun effetto!

column-gap

Imposta il margine fra colonna e colonna: di default è 1em, un valore buono in rapporto allo spazio che occupa. 

column-rule

Le proprietà generali del bordo della colonna, quali:

  1. Lunghezza del bordo,
  2. Stile (solid, dashed),
  3. Colore (qualunque tipo di colore).

Quindi per impostare una "filettatura" di 15px con bordo continuo di colore nero:

column-rule: 2px solid #000;

Conclusioni

Come abbiamo visto la procedura è molto semplice, però dobbiamo stare sempre attenti alla compatibilità dei vari browser: Internet Explorer in primis, che come detto prima, supporta le colonne solo dalla 10 in poi, ma per il resto non ci dovrebbero essere altri problemi di sorta, siccome la percentuale di supporto totale è circa dell'80%!

Per chi volesse vedere dal vivo la pagina, ecco la demo:


DEMO

Ti potrebbero interessare

I più letti