Vous pouvez créer une grille réactive de carrés avec un contenu centré verticalement et horizontalement uniquement avec CSS . Je vais vous expliquer comment dans un processus étape par étape, mais voici d'abord 2 démos de ce que vous pouvez réaliser:
Voyons maintenant comment créer ces carrés réactifs fantaisie!
1. Créer les carrés réactifs:
L'astuce pour garder les éléments carrés (ou tout autre rapport hauteur / largeur) est d'utiliser le pourcentage padding-bottom.
Note latérale: vous pouvez également utiliser un rembourrage supérieur ou une marge supérieure / inférieure mais l'arrière-plan de l'élément ne s'affichera pas.
Comme le remplissage supérieur est calculé en fonction de la largeur de l' élément parent ( voir MDN pour référence ), la hauteur de l'élément changera en fonction de sa largeur. Vous pouvez maintenant conserver ses proportions en fonction de sa largeur.
À ce stade, vous pouvez coder:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Voici un exemple de mise en page simple d' une grille de 3 * 3 carrés en utilisant le code ci-dessus.
Avec cette technique, vous pouvez faire n'importe quel autre rapport hauteur / largeur, voici un tableau donnant les valeurs de remplissage du bas en fonction du rapport hauteur / largeur et d'une largeur de 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. Ajout de contenu à l'intérieur des carrés
Comme vous ne pouvez pas ajouter de contenu directement à l'intérieur des carrés (cela augmenterait leur hauteur et les carrés ne seraient plus des carrés), vous devez créer des éléments enfants (pour cet exemple, j'utilise des divs) à l'intérieur d'eux position: absolute;et y mettre le contenu. . Cela retirera le contenu du flux et conservera la taille du carré.
N'oubliez pas d'ajouter position:relative;les div parent afin que les enfants absolus soient positionnés / dimensionnés par rapport à leur parent.
Ajoutons du contenu à notre grille de carrés 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%;
}
RESULT <- avec un peu de mise en forme pour le rendre joli!
3. centrer le contenu
Horizontalement:
Ceci est assez facile, il vous suffit d'ajouter text-align:centerà .content.
RÉSULTAT
Alignement vertical
Cela devient sérieux! L'astuce est d'utiliser
display:table;
/* and */
display:table-cell;
vertical-align:middle;
mais nous ne pouvons pas utiliser display:table;on .squareou .contentdivs car il entre en conflit avec position:absolute;donc nous devons créer deux enfants à l'intérieur des .contentdivs. Notre code sera mis à jour comme suit:
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%;
}
Nous avons maintenant terminé et nous pouvons jeter un œil au résultat ici:
violon modifiable ici
