ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

METODI PER AVERE COLONNE DI ALTEZZA UGUALE TRA LORO

Argomenti: , , , , ,

Autore: Andrea Baccolini

CSS 3
Set
01
2017

Traduzione dell’articolo “Methods for Equal Height Columns” del blog “CODEPEN.

Mentre guardavo il nuovo sito web di un concorrente, ho visto che stavano usando il float e un elemento successivo per creare colonne di altezza uguale. Questo mi ha portato a pensare a tutti i diversi modi in cui puoi creare un layout di colonna uguali.

Di seguito ho intenzione di analizzare i diversi modi per ottenere un layout di contenuti con un’altezza uguale per tutti.

 

USANDO L’AFTER E IL FLOAT

Questo è il metodo che ho citato in precedenza. Non è una cosa che ho usato prima e si intende più per centrare verticalmente il contenuto.

PRO

  • Le colonne sono uguali
  • Le colonne hanno un’altezza massima impostata in modo da non essere mai più alte di quanto si desidera e scendono verticalmente mentre la pagina si restringe.

CONTRO

  • L’altezza non è dinamica. Se il contenuto è lungo, si espanderà al di fuori del contenitore.
  • Richiede codice se si desidera cambiare da un layout a 3 colonne a uno a due colonne poichè il browser non lo consente.

 

L’HTML

L’HTML è un layout tipico della griglia. Hai una riga contenente le tue colonne.

 

IL CSS

Per il CSS hai una riga con un clearfix. Poi le colonne hanno il max-height impostato per limitare il “padding-top:100%” in modo da non farle espandere troppo.

ESEMPIO

See the Pen Equal Height Columns – After + Float by Craig Fox (@craigwfox) on CodePen.

 

USANDO display: table-cell;

Questo è stato uno dei miei metodi prima di iniziare ad usare flexbox. È abbastanza facile da usare e ha un supporto solido di browser nelle versioni precedenti di IE.

PRO

  • Le colonne sono uguali.
  • Grande sostegno / fallback per ie9

CONTRO:

  • Ottenere spazio tra i colori di sfondo delle colonne può essere un dolore, che richiede di eseguire delle wrapping all’interno di ogni colonna e di utilizzare il padding per creare spazio.

 

L’HTML

L’html è lo stesso usando il metodo :before.

 

Il CSS

Il CSS è semplice: alla classe “.coll” viene data la proprietà “display: table-cell”. Quindi impostare la larghezza desiderata.

 

ESEMPIO

See the Pen Equal Height Columns – table-cell by Craig Fox (@craigwfox) on CodePen.

 
 

USANDO FLEX

PRO:

  • Colonne di altezza pari
  • Può spostare e riordinare il contenuto con CSS
  • Non richiede che le righe dispongano di più righe di colonne, quindi se è necessario scambiare dal numero di colonne è possibile utilizzare css.

CONTRO:

  • Richiede pochi prefissi per il supporto del browser (Autoprefixer lo rende facile)
  • Se hai bisogno di supportare le versioni precedenti di IE (9 e successive), ti servirà un fallback

 

L’HTML

Non c’è bisogno di un sacco di wrapper/contenitori. Abbiamo bisogno di un genitore che avvolga tutte le colonne.

 

IL CSS

Sul contenitore padre, “.grid” in questo caso, aggiungeremo “display: flex” e abbiamo le colonne di altezza uguali.

C’è un inconveniente qui se vogliamo impostare una larghezza per dire il cinquanta per cento e abbiamo quattro colonne, per impostazione predefinita ignorerà quella larghezza e adatterà tutte e quattro le colonne nella stessa riga. Per risolvere questo, aggiungeremo “flex-wrap: wrap” a “.grid” e poi passiamo una larghezza a “.col” e la terza e la quarta colonna dovrebbero cadere in una seconda fila.

 

ESEMPIO

See the Pen Equal Height Columns – flexbox by Craig Fox (@craigwfox) on CodePen.

 
Per una guida più completa al box flex, visitare CSS-Tricks

 
SUPPORTO BROWSER

Can i use Flex - altezza uguale

Clikka sull’immagine per aprire la pagina

 

UTLIZZANDO LA GRIGLIA o “GRID”

PRO:

  • Tonnellate di opzioni per il controllo ottimale del layout. Puoi prenderla alla larga o definire le specifiche di layout per ogni elemento.
  • Come Flexbox è possibile riorganizzare i contenuti con CSS rendendo più facile la codifica per diverse risoluzioni.

CONTRO:

  • Non ha un supporto solido del browser come Flexbox

 

L’HTML

Non c’è bisogno di un sacco di wrapper / contenitori. Abbiamo bisogno di un genitore che avvolge tutte le colonne.

 

IL CSS

Questo può essere semplice nel complesso come vuoi che sia. Ci sono opzioni per impostare la colonna base e le dimensioni delle righe, ma è anche possibile ottenere una specifica come si desidera.

 

ESEMPIO

See the Pen Equal Height Columns – grid by Craig Fox (@craigwfox) on CodePen.

 
Per una guida più completa alla griglia CSS controlla MDN o CSS-Tricks

 
SUPPORTO BROWSER

Can i use Grid - altezza uguale

Clikka sull’immagine per aprire la pagina


 
 

Traduzione dell’articolo “Methods for Equal Height Columns” del blog “CODEPEN.

 

 

METODI PER AVERE COLONNE DI ALTEZZA UGUALE TRA LORO ultima modifica: 2017-09-01T16:24:34+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

COMMENTA QUESTO ARTICOLO!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

43 − = 33

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Andrea Baccolini | Web designer Copyright 2012 - 2018 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.