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

Le esclusioni css
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!

Per favore compila il captcha (richiesto):

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