Puede crear una cuadrícula de cuadrados receptiva con contenido centrado vertical y horizontalmente solo con CSS . Explicaré cómo en un proceso paso a paso, pero primero aquí hay 2 demostraciones de lo que puede lograr:
¡Ahora veamos cómo hacer estos cuadrados elegantes y sensibles!
1. Hacer los cuadrados receptivos:
El truco para mantener los elementos cuadrados (o cualquier otra relación de aspecto) es usar el porcentaje padding-bottom.
Nota al margen: también puede usar el relleno superior o el margen superior / inferior, pero el fondo del elemento no se mostrará.
Como el relleno superior se calcula de acuerdo con el ancho del elemento principal ( consulte MDN para referencia ), la altura del elemento cambiará de acuerdo con su ancho. Ahora puede mantener su relación de aspecto según su ancho.
En este punto puedes codificar:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Aquí hay un ejemplo de diseño simple de cuadrícula de 3 * 3 cuadrados usando el código anterior.
Con esta técnica, puede hacer cualquier otra relación de aspecto, aquí hay una tabla que proporciona los valores del relleno inferior de acuerdo con la relación de aspecto y un ancho 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. Agregar contenido dentro de los cuadrados
Como no puede agregar contenido directamente dentro de los cuadrados (expandiría su altura y los cuadrados ya no serían cuadrados), debe crear elementos secundarios (para este ejemplo estoy usando divs) dentro de ellos position: absolute;y colocar el contenido dentro de ellos . Esto eliminará el contenido del flujo y mantendrá el tamaño del cuadrado.
No olvide agregar position:relative;los divs principales para que los hijos absolutos se posicionen / dimensionen relativamente a sus padres.
Agreguemos algo de contenido a nuestra cuadrícula de cuadrados 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%;
}
RESULTADO <- con algo de formato para hacerlo bonito!
3. Centrando el contenido
Horizontalmente:
Esto es bastante fácil, sólo tiene que añadir text-align:centera .content.
RESULTADO
Alineamiento vertical
Esto se vuelve serio! El truco es usar
display:table;
/* and */
display:table-cell;
vertical-align:middle;
pero no podemos usar display:table;on .squareo .contentdivs porque entra en conflicto con position:absolute;lo que necesitamos crear dos hijos dentro de .contentdivs. Nuestro código se actualizará de la siguiente manera:
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%;
}
Ya hemos terminado y podemos ver el resultado aquí:
violín editable aquí
