Puoi creare una griglia reattiva di quadrati con contenuto centrato verticalmente e orizzontalmente solo con CSS . Spiegherò come procedere passo per passo, ma prima ecco due demo di ciò che puoi ottenere:
Ora vediamo come realizzare questi fantastici quadrati reattivi!
1. Realizzare i quadrati reattivi:
Il trucco per mantenere gli elementi quadrati (o qualunque altra proporzione) è usare la percentuale padding-bottom.
Nota a margine: puoi usare anche il padding superiore o il margine superiore / inferiore ma lo sfondo dell'elemento non verrà visualizzato.
Poiché l'imbottitura superiore viene calcolata in base alla larghezza dell'elemento principale ( vedere MDN per riferimento ), l'altezza dell'elemento cambierà in base alla sua larghezza. Ora puoi mantenere le proporzioni in base alla sua larghezza.
A questo punto puoi codificare:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Ecco un semplice esempio di layout della griglia di 3 * 3 quadrati usando il codice sopra.
Con questa tecnica, puoi creare qualsiasi altro formato, ecco una tabella che riporta i valori dell'imbottitura inferiore in base al formato e alla larghezza del 30%.
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
2. Aggiunta di contenuto all'interno dei quadrati
Poiché non puoi aggiungere contenuti direttamente all'interno dei quadrati (aumenterebbe la loro altezza e i quadrati non sarebbero più quadrati) devi creare elementi figlio (per questo esempio sto usando div) al loro interno position: absolute;e inserire il contenuto al loro interno . Ciò eliminerà il contenuto dal flusso e manterrà le dimensioni del quadrato.
Non dimenticare di aggiungere position:relative;i div genitori in modo che i figli assoluti siano posizionati / dimensionati relativamente al loro genitore.
Aggiungiamo alcuni contenuti alla nostra griglia di quadrati 3x3:
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
RISULTATO <- con un po 'di formattazione per renderlo carino!
3.Centro del contenuto
Orizzontalmente:
Questo è abbastanza semplice, basta aggiungere text-align:centera .content.
RISULTATO
Allineamento verticale
Questo diventa serio! Il trucco è usare
display:table;
/* and */
display:table-cell;
vertical-align:middle;
ma non possiamo usare display:table;su .squareo .contentdiv perché in conflitto con position:absolute;così abbiamo bisogno di creare due bambini all'interno .contentdiv. Il nostro codice verrà aggiornato come segue:
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CSS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
Abbiamo finito e possiamo dare un'occhiata al risultato qui:
violino modificabile qui
