¿Es posible hacer un ajuste de cuadrícula CSS sin usar consultas de medios?
En mi caso, tengo un número no determinista de elementos que quiero colocar en una cuadrícula y quiero que esa cuadrícula se ajuste. Usando Flexbox, no puedo espaciar bien las cosas de manera confiable. También me gustaría evitar un montón de consultas de medios.
Aquí hay un código de muestra :
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>Y aquí hay una imagen GIF:
Como nota al margen, si alguien puede decirme cómo podría evitar especificar el ancho de todos los elementos como yo grid-template-columns, sería genial. Preferiría que los niños especificaran su propio ancho.
grid-template-columns: auto auto auto auto;funciona en este caso? =)Respuestas:
Utilice
auto-filloauto-fitcomo número de repetición de larepeat()notación.auto-fillLa cuadrícula repetirá tantas pistas como sea posible sin desbordar su contenedor.
En este caso, dado el ejemplo anterior (ver imagen) , solo 5 pistas pueden caber en el contenedor de rejilla sin desbordarse. Solo hay 4 elementos en nuestra cuadrícula, por lo que se crea un quinto como una pista vacía dentro del espacio restante.
El resto del espacio restante, pista # 6, finaliza la cuadrícula explícita. Esto significa que no había suficiente espacio para colocar otra pista.
auto-fitLa
auto-fitpalabra clave se comporta igual queauto-fill, excepto que después del algoritmo de ubicación de elementos de la cuadrícula, las pistas vacías dentro del espacio restante se contraerán a0.La cuadrícula seguirá repitiendo tantas pistas como sea posible sin desbordar su contenedor, pero las pistas vacías se contraerán a
0.Una pista colapsada se considera que tiene una función de tamaño de pista fija de
0px.A diferencia del
auto-fillejemplo de la imagen, la quinta pista vacía se contrae, terminando la cuadrícula explícita justo después del cuarto elemento.auto-fillvsauto-fitLa diferencia entre los dos se nota cuando
minmax()se utiliza la función.Úselo
minmax(186px, 1fr)para clasificar los elementos de186pxa186pxmás una fracción del espacio sobrante en el contenedor de la cuadrícula.Cuando se usa
auto-fill, los elementos crecerán una vez que no haya espacio para colocar pistas vacías.Cuando se usa
auto-fit, los elementos crecerán para llenar el espacio restante porque todas las pistas vacías se contraen a0px.Patio de recreo:
CodePen
Inspeccionar pistas de llenado automático
Inspección de pistas de ajuste automático
fuente
display: griduso del elementojustify-content: centerrepeat(auto-fill, minmax(186px, 1fr));no son píxeles, pero siempre y cuando el div tenga texto dentro?Quieres cualquiera
auto-fitoauto-filldentro de larepeat()función:La diferencia entre los dos se hace evidente si también usa a
minmax()para permitir tamaños de columna flexibles:Esto permite que sus columnas se flexionen en tamaño, que van desde 186 píxeles hasta columnas de igual ancho que se extienden por todo el ancho del contenedor.
auto-fillcreará tantas columnas como quepan en el ancho. Si, digamos, caben cinco columnas, aunque solo tenga cuatro elementos de cuadrícula, habrá una quinta columna vacía:Usar en su
auto-fitlugar evitará columnas vacías, estirando aún más la suya si es necesario:fuente
Puede que estés buscando
auto-fill:Demostración: http://codepen.io/alanbuchanan/pen/wJRMox
Para utilizar el espacio disponible de manera más eficiente, puede usar
minmaxy pasarautocomo segundo argumento:Demostración: http://codepen.io/alanbuchanan/pen/jBXWLR
Si no desea las columnas vacías, puede usar en
auto-fitlugar deauto-fill.fuente
Tuve una situación similar. Además de lo que hiciste, quería centrar mis columnas en el contenedor sin permitir que las columnas vacías se desplazaran hacia la izquierda o hacia la derecha:
fuente
Este es mi intento. Disculpe la pelusa, me sentía muy creativo.
Mi método es un padre
divcon dimensiones fijas . El resto es simplemente ajustar el contenido dentro de ese div en consecuencia.Esto cambiará la escala de las imágenes independientemente de la relación de aspecto. Tampoco habrá recortes difíciles .
fuente