css - example - Un diseño de cuadrícula con cuadrados receptivos
text color css (3)
El truco del
padding-bottom
es el más utilizado para lograr eso.
Puede combinarlo con Flexbox y CSS Grid, y dado que el uso de porcentaje para margen / relleno proporciona un resultado inconsistente para elementos de flex / grid, se puede agregar un contenedor adicional, o como aquí, usando un pseudo, por lo que el elemento con porcentaje no es El elemento flex / grid.
Editar: Nota, hay una actualización hecha a las especificaciones. , que ahora debería dar un resultado consistente cuando se usa en elementos de flex / grid. Sin embargo, tenga en cuenta que el problema aún ocurre en versiones anteriores.
Tenga en cuenta que si va a agregar contenido al elemento de
content
, debe ser una posición absoluta para mantener la relación de aspecto del cuadrado.
.square-container {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid;
box-sizing: border-box;
}
.square::before {
content: '''';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Versión de CSS Grid
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-gap: 10px;
}
.square {
position: relative;
border: 1px solid;
box-sizing: border-box;
}
.square::before {
content: '''';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Quiero crear un diseño de cuadrícula con cuadrados receptivos.
Siento que debería poder hacer esto con el diseño de la cuadrícula CSS, pero tengo problemas para configurar la altura de cada cuadrado para que sea igual al ancho.
También tiene problemas para establecer una canaleta entre cada cuadrado.
¿Sería mejor usar flexbox?
Actualmente mi HTML se ve así, pero será dinámico, por lo que se pueden agregar más cuadrados. Y, por supuesto, debe ser receptivo, por lo que idealmente usará una consulta de medios para contraerla en una columna.
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Usando la cuadrícula CSS, esto es todo lo que tengo
.square-container{
display: grid;
grid-template-columns: 30% 30% 30%;
.square {
}
}
Pude llegar un poco más lejos con flexbox y pude usar el espacio intermedio para alinear cuadrados con una buena canaleta, pero todavía estaba luchando para que la altura coincidiera con el ancho de cada cuadrado.
No pude encontrar ningún ejemplo de esto hecho con flexbox o grid, pero cualquier ejemplo también sería apreciado.
Gracias
Intente usar unidades de porcentaje de ventana gráfica .
jsFiddle
.square-container {
display: grid;
grid-template-columns: repeat(3, 30vw);
grid-template-rows: 30vw;
grid-gap: 2.5vw;
padding: 2.5vw;
background-color: gray;
}
.square {
background-color: lightgreen;
}
body {
margin: 0; /* remove default margins */
}
<div class="square-container">
<div class="square">
<div class="content"></div>
</div>
<div class="square">
<div class="content spread"></div>
</div>
<div class="square">
<div class="content column"></div>
</div>
</div>
De la especificación:
5.1.2. Longitudes de porcentaje de ventana
vmin: las unidadesvw,vh,vmin,vmaxLas longitudes de porcentaje de ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia.
- Unidad vw : igual al 1% del ancho del bloque contenedor inicial.
- Unidad vh : igual al 1% de la altura del bloque contenedor inicial.
- Unidad vmin : igual a la menor de
vwovh.- Unidad vmax : igual a la mayor de
vwovh.
Puede usar el hecho de que el
relleno
se calcula en función del ancho y establecer
padding-top: 100%
directamente
a los
elementos de la cuadrícula
square
(los elementos de la cuadrícula serían cuadrados ahora).
Actualización 2019
Tenga en cuenta que para los elementos flexibles , así como los elementos de la cuadrícula anteriormente, esto no solía funcionar: consulte la publicación vinculada en los comentarios a esta respuesta:
Ahora que existe un consenso entre los navegadores (versiones más recientes) para tener el mismo comportamiento para el
paddingde elementos flexibles y elementos de cuadrícula , puede usar esta solución.
Ver demostración a continuación:
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-gap: 10px;
}
.square {
background: cadetblue;
padding-top: 100%; /* padding trick directly on the grid item */
box-sizing: border-box;
position: relative;
}
.square .content { /* absolutely positioned */
position: absolute;
top: 0;
right:0;
left: 0;
bottom: 0;
}
<div class="square-container">
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content"> some content here</div>
</div>
<div class="square">
<div class="content column">some content here and there is a lot of text here</div>
</div>
<div class="square">
<div class="content spread">text</div>
</div>
<div class="square">
<div class="content column">some text here</div>
</div>
</div>