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.
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>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.
.row:after {
content: "";
display: table;
clear: both;
}
.col {
max-height: 300px;
float: left;
position: relative;
}
.col:after {
content: "";
display: block;
padding-top: 100%;
}
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.
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>Il CSS
Il CSS è semplice: alla classe “.coll” viene data la proprietà “display: table-cell”. Quindi impostare la larghezza desiderata.
.col {
width: 50%;
height: 100%;
display: table-cell;
}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.
<div class="grid">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>IL CSS
Sul contenitore padre, “.grid” in questo caso, aggiungeremo “display: flex” e abbiamo le colonne di altezza uguali.
.grid {
display: flex;
}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.
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
width: 50%
}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
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.
<div class="grid">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>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.
.grid {
display: grid;
grid-gap: 20px;
grid-auto-rows: minmax(100px, auto);
grid-template-columns: 50% 1fr;
}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
Traduzione dell’articolo “Methods for Equal Height Columns” del blog “CODEPEN.“
