Grille de carrés réactifs

Je me demande comment je pourrais créer une mise en page avec des carrés réactifs . Chaque carré aurait un contenu vertical et aligné horizontalement . L’exemple spécifique est affiché ci-dessous …

carrés sensibles avec contenu

Vous pouvez créer une grid de carrés réactive avec un contenu vertical et centré horizontalement uniquement avec CSS . Je vais vous expliquer comment dans un processus étape par étape, mais d’abord voici 2 démos de ce que vous pouvez réaliser:

  • Grille d’images carrées
  • Grille de carrés avec contenu

Grille carrée 3x3 sensible Images carrées réactives dans une grille 3x3

Voyons maintenant comment créer ces carrés réactifs sophistiqués!


1. Faire les carrés sensibles:

L’astuce pour garder les éléments carrés (ou plus loin que l’autre ratio) consiste à utiliser un pourcentage de padding-bottom .
Note latérale: vous pouvez utiliser le remplissage supérieur aussi bien que la 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 change en fonction de sa largeur. Vous pouvez maintenant conserver son format en fonction de sa largeur.
À ce stade, vous pouvez coder:

HTML :

  

CSS

 div { width: 30%; padding-bottom: 30%; /* = width for a square aspect ratio */ } 

Voici un exemple simple de disposition d’une grid de 3 * 3 carrés en utilisant le code ci-dessus.

Avec cette technique, vous pouvez faire n’importe quel autre rapport d’aspect, voici un tableau donnant les valeurs du rembourrage inférieur en fonction du ratio d’aspect 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. Ajouter du contenu à l’intérieur des carrés

Comme vous ne pouvez pas append de contenu directement à l’intérieur des carrés (cela augmenterait leur hauteur et que les carrés ne seraient plus des carrés), vous devez créer des éléments enfants (pour cet exemple, je suis des divs) à l’intérieur avec position:abolute; et mettre le contenu à l’intérieur d’eux. Cela permettra de retirer le contenu du stream et de conserver la taille du carré.

N’oubliez pas d’append la position:relative; sur les divs parent afin que les enfants absolus soient positionnés par rapport à leur parent.

Permet d’append du contenu à notre grid de carrés 3×3:

HTML :

 
.. CONTENT HERE ..
... 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%; } 

RÉSULTAT <- avec un formatage pour le rendre joli!


3. Centrer le contenu

Horizontaly:

C’est assez simple, il vous suffit d’append 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; sur les .square ou .content car il est en conflit avec position:absolute; nous devons donc créer deux enfants à l’intérieur de div. Notre code sera mis à jour comme suit:

HTML :

 
... CONTENT HERE ...
... 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 regarder le résultat ici:

RÉSULTAT EN PLEIN ÉCRIT VIVANT

violon éditable ici


Vous pouvez utiliser des unités vw (view-width), ce qui rend les carrés réactifs en fonction de la largeur de l’écran.

Une rapide maquette de ceci serait:

 html, body { margin: 0; padding: 0; } div { height: 25vw; width: 25vw; background: tomato; display: inline-block; text-align: center; line-height: 25vw; font-size: 20vw; margin-right: -4px; position: relative; } /*demo only*/ div:before { content: ""; position: absolute; top: 0; left: 0; height: inherit; width: inherit; background: rgba(200, 200, 200, 0.6); transition: all 0.4s; } div:hover:before { background: rgba(200, 200, 200, 0); } 
 
1
2
3
4
5
6
7
8

La réponse acceptée est excellente, mais cela peut être fait avec flexbox .

Voici un système de grid écrit avec la syntaxe BEM qui permet d’afficher 1 à 10 colonnes par ligne.

Si la dernière ligne est incomplète (par exemple, vous choisissez d’afficher 5 cellules par ligne et il y a 7 éléments), les éléments de fin seront centrés horizontalement. Pour contrôler l’alignement horizontal des éléments de fin, modifiez simplement la propriété .square-grid justify-content sous la classe .square-grid .

 .square-grid { display: flex; flex-wrap: wrap; justify-content: center; } .square-grid__cell { background-color: rgba(0, 0, 0, 0.03); box-shadow: 0 0 0 1px black; overflow: hidden; position: relative; } .square-grid__content { left: 0; position: absolute; top: 0; } .square-grid__cell:after { content: ''; display: block; padding-bottom: 100%; } // Sizes – Number of cells per row .square-grid__cell--10 { flex-basis: 10%; } .square-grid__cell--9 { flex-basis: 11.1111111%; } .square-grid__cell--8 { flex-basis: 12.5%; } .square-grid__cell--7 { flex-basis: 14.2857143%; } .square-grid__cell--6 { flex-basis: 16.6666667%; } .square-grid__cell--5 { flex-basis: 20%; } .square-grid__cell--4 { flex-basis: 25%; } .square-grid__cell--3 { flex-basis: 33.333%; } .square-grid__cell--2 { flex-basis: 50%; } .square-grid__cell--1 { flex-basis: 100%; } 
 .square-grid { display: flex; flex-wrap: wrap; justify-content: center; } .square-grid__cell { background-color: rgba(0, 0, 0, 0.03); box-shadow: 0 0 0 1px black; overflow: hidden; position: relative; } .square-grid__content { left: 0; position: absolute; top: 0; } .square-grid__cell:after { content: ''; display: block; padding-bottom: 100%; } // Sizes – Number of cells per row .square-grid__cell--10 { flex-basis: 10%; } .square-grid__cell--9 { flex-basis: 11.1111111%; } .square-grid__cell--8 { flex-basis: 12.5%; } .square-grid__cell--7 { flex-basis: 14.2857143%; } .square-grid__cell--6 { flex-basis: 16.6666667%; } .square-grid__cell--5 { flex-basis: 20%; } .square-grid__cell--4 { flex-basis: 25%; } .square-grid__cell--3 { flex-basis: 33.333%; } .square-grid__cell--2 { flex-basis: 50%; } .square-grid__cell--1 { flex-basis: 100%; } 
 
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content

J’ai écrit une bibliothèque, appelée simpleGrid , qui fait exactement cela, et le bon côté des choses, c’est qu’elle peut gérer n’importe quel nombre d’éléments sans problèmes de performances. Il ajuste automatiquement la quantité d’éléments par ligne.

Si vous voulez que chaque élément ait un ratio d’aspect spécifique, vous devez utiliser une astuce pour cela, ce qui est assez simple.

J’utilise cette solution pour des boîtes réactives de différentes rations:

HTML:

 
... CONTENT HERE ...

CSS:

 .box-content { width: 100%; height: 100%; top: 0;right: 0;bottom: 0;left: 0; position: absolute; } .box { position: relative; width: 100%; } .box::before { content: ""; display: block; padding-top: 100%; /*square for no ratio*/ } .ratio1_1::before { padding-top: 100%; } .ratio1_2::before { padding-top: 200%; } .ratio2_1::before { padding-top: 50%; } .ratio4_3::before { padding-top: 75%; } .ratio16_9::before { padding-top: 56.25%; } 

Voir la démo sur JSfiddle.net