Tengo una serie de imágenes que se obtienen de una base de datos, y cuando se agregan tres o más imágenes, muestra visualmente las tres columnas.
Cuando hay menos de tres imágenes presentes, porque estoy usando display: grid; actualmente está justificado a la izquierda del contenedor principal (en el ejemplo de código, acabo de usar cuadros rojos para representar las imágenes).
¿Hay alguna forma de tenerlo para que cuando una o dos imágenes estén presentes, estas se justifiquen en el centro del elemento principal? Aprecio poder usar javascript para detectar cuántas imágenes están presentes y si son menos de tres, agregar una clase y cambiar el contenedor para display: flex , pero me preguntaba si tal diseño era posible solo con CSS.
Debido a la naturaleza del diseño, necesito usar CSS Grid cuando hay más de tres imágenes presentes.
Nota: he comentado dos de los cuadros rojos en el HTML para mostrar el problema inicial cuando solo hay un cuadro rojo presente.
Codepen: https://codepen.io/anna_paul/pen/xxXrVJQ
body { display: flex; justify-content: center; margin: 0 width: 100%; height: 100vh; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; max-width: 1250px; } .box { width: 200px; height: 200px; background: red; } <div class="wrapper"> <div class="box"></div> <!-- <div class="box"></div> <div class="box"></div> --> </div>usar auto en lugar de fr y usar align-content resuelve tu problema.
body { display: flex; justify-content: center; margin: 0 width: 100%; height: 100vh; } .wrapper { display: grid; grid-template-columns: auto auto auto; align-content : start; /* grid-gap: 1rem; */ max-width: 1250px; } .box { width: 200px; height: 200px; background: red; margin: 1rem ; } <div class="wrapper"> <div class="box"></div> <!-- <div class="box"></div> <div class="box"></div> --> </div>Hazlo como a continuación:
.wrapper { display: grid; grid-auto-flow:column; /* column flow */ justify-content:center; /* center everything */ grid-gap: 1rem; max-width: 600px; border:1px solid; margin:10px auto; } /* make sure you only have 3 columns*/ .box:nth-child(3n + 1) {grid-column:1} .box:nth-child(3n + 2) {grid-column:2} .box:nth-child(3n + 3) {grid-column:3} /**/ .box { width: 100px; height: 100px; background: red; } <div class="wrapper"> <div class="box"></div> </div> <div class="wrapper"> <div class="box"></div> <div class="box"></div> </div> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>Debido a que está utilizando 1fr para cada columna, incluso si una columna no tiene contenido, ocupa el 33% del espacio libre. Debe especificar unidades distintas de la unidad fr (fracción del espacio disponible):
grid-template-columns: auto auto auto; grid-template-columns: repeat(3, auto); grid-template-columns: repeat(3, minmax(min-content, max-content)); Utilice cualquiera de los anteriores. Hay una pequeña diferencia entre auto y minmax(min-content, max-content) .
A continuación se muestra la demostración con 3 contenedores con 1, 2 y >3 artículos respectivamente:
body { margin: 0; width: 100%; height: 100vh; } .demo { display: flex; justify-content: center; } .wrapper { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); grid-gap: 1rem; width: auto; max-width: 1250px; } .box { width: 200px; height: 200px; background: red; border: 1px solid; } <p>Grid with one item</p> <div class="demo"> <div class="wrapper"> <div class="box">1</div> </div> </div> <hr> <p>Grid with two items</p> <div class="demo"> <div class="wrapper"> <div class="box">1</div> <div class="box">2</div> </div> </div> <hr> <p>Grid with >3 items</p> <div class="demo"> <div class="wrapper"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> </div> La brecha grid-gap 1 rem permanecerá incluso si la columna tiene un ancho de 0. Entonces, en su configuración, cuadrícula dentro de la flexión, el elemento en la cuadrícula de un elemento estará desviado por 2 rem (2 brechas de cuadrícula) desde el centro. Si esto no es gran cosa, entonces no te preocupes.
Pero si desea un centro exacto, debe crear grid-gap:0 . Y use el espaciado en los elementos de la cuadrícula lateral (.box) como margin: 0.5rem; o padding:0.5rem para hacer un espacio de rejilla artificial.
body { margin: 0; width: 100%; height: 100vh; } .demo { display: flex; justify-content: center; } .wrapper { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); width: auto; max-width: 1250px; } .box { width: 200px; height: 200px; background: red; border: 1px solid; margin: 0.5rem; } <p>Grid with one item</p> <div class="demo"> <div class="wrapper"> <div class="box">1</div> </div> </div> <hr> <p>Grid with two items</p> <div class="demo"> <div class="wrapper"> <div class="box">1</div> <div class="box">2</div> </div> </div> <hr> <p>Grid with >3 items</p> <div class="demo"> <div class="wrapper"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> </div>