2

Tengo una pagina donde muestro mis pedidos mediante grid css al estilo de pinterest (mansory) sin embargo no logro hacer que el orden en el que me lo muestra sea el correcto, estan ordenados por columnas.

Tengo una pagina donde muestro mis pedidos mediante grid css al estilo de pinterest (mansory) sin embargo no logro hacer que el orden en el que me lo muestra sea el correcto, estan ordenados por columnas.

Este es mi codigo

.grid-pinterest {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
.grid-pinterest .item {
  width: 100%;
  display: inline-block;
  margin-bottom: 0.5em;
  background:#eaeaea;
}
.grid-pinterest .item img {
  max-width: 100%;
  width: 100%;
}
@media (max-width: 1200px) {
  .grid-pinterest {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
@media (max-width: 992px) {
  .grid-pinterest {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media (max-width: 768px) {
  .grid-pinterest {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
<div class="grid-pinterest">
<div class="item"><b>#18</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#17</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4</div>
<div class="item"><b>#16</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#15</b><br>Pedido 1<br>Pedido 2</div>
<div class="item"><b>#14</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#13</b><br>Pedido 1</div>
<div class="item"><b>#12</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#11</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4</div>
<div class="item"><b>#10</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#09</b><br>Pedido 1<br>Pedido 2</div>
<div class="item"><b>#08</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#07</b><br>Pedido 1</div>
<div class="item"><b>#06</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#05</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4</div>
<div class="item"><b>#04</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#03</b><br>Pedido 1<br>Pedido 2</div>
<div class="item"><b>#02</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#01</b><br>Pedido 1</div>
</div>

el codigo me muestra esto:

|pedido 18|pedido 14|pedido 10|pedido 05|
|pedido 17|pedido 13|pedido 09|pedido 04|
|pedido 16|pedido 12|pedido 08|pedido 03|
|pedido 15|pedido 11|pedido 07|pedido 02|
|pedido 14|pedido 10|pedido 06|pedido 01|

pero yo deseo que me muestre asi:
|pedido 18|pedido 17|pedido 16|pedido 15|
|pedido 14|pedido 13|pedido 12|pedido 11|
|pedido 10|pedido 09|pedido 08|pedido 07|
|pedido 06|pedido 05|pedido 04|pedido 03|
|pedido 02|pedido 01|

Nota: la idea es que me muestre los pedidos de manera consecutiva pero horizontal para que asi si es que ingresa un nuevo pedido se ubique en primer lugar

1
  • no amigo, testea mi codigo y veras que ya esta ordenado, lo que pasa es que en el grid se debe ordenar, porfavor testea mi codigo en pantalla completa
    – IntruzO
    el 19 ene. 2021 a las 18:47

1 respuesta 1

1

1.- Te recomiendo que trabajes con CSS GRID a tu elemento con la clase .grid-pinterest le pones la propiedad display: grid; es necesario que a tu GRID le agregues un ancho establecido ejemplo:

.grid-pinterest {
  display: grid;
  width: 900px;
}

2.- Despues definimos las columnas que quieres mostrar:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

3.- En la linea anterior estamos diciendo que el tamaño mínimo de los items dentro de nuesta GRID será de 200px y el maximo será de 1 Fraccion, como nuestra GRID tiene un ancho de 900px habra solo 4 columnas, con la propiedad auto-fill nuestros items se ajustarán de manera automática segun el tamaño.

4.- Te muestro un ejemplo práctico:

.grid-pinterest {
  display: grid;
  margin: auto;
  width: 900px;
  width: 95%;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 30px;
}
.grid-pinterest .item {
  width: 100%;
  display: inline-block;
  margin-bottom: 0.5em;
  background: #eaeaea;
}
.grid-pinterest .item img {
  max-width: 100%;
  width: 100%;
}
<div class="grid-pinterest">
<div class="item"><b>#18</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#17</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4</div>
<div class="item"><b>#16</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#15</b><br>Pedido 1<br>Pedido 2</div>
<div class="item"><b>#14</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#13</b><br>Pedido 1</div>
<div class="item"><b>#12</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#11</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4</div>
<div class="item"><b>#10</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#09</b><br>Pedido 1<br>Pedido 2</div>
<div class="item"><b>#08</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#07</b><br>Pedido 1</div>
<div class="item"><b>#06</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#05</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4</div>
<div class="item"><b>#04</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#03</b><br>Pedido 1<br>Pedido 2</div>
<div class="item"><b>#02</b><br>Pedido 1<br>Pedido 2<br>Pedido 3<br>Pedido 4<br>Pedido 5<br>Pedido 6</div>
<div class="item"><b>#01</b><br>Pedido 1</div>
</div>

5.- Tal vez te interese leer mas sobre CSS GRID:

CSS GRID LAYOUT

6
  • Amigo el codigo funciona perfectamente con relacion al orden de las columnas, pero todos los div ocupan el mismo alto, intente solucionarlo con height: fit-content pero me queda el espacio del ancho del div anterior
    – IntruzO
    el 19 ene. 2021 a las 21:02
  • Deberias de modificar el alto de tus imagenes, ponlo en auto, si hubieras puesto tu codigo con una imagen de muestra mi respuesta hubiera sido mas acertada. el 19 ene. 2021 a las 21:04
  • es es el problema amigo, que no es para una galeria (imagenes) es para texto, es decir lo que deseo es que aparescan los pedidos (texto) en cuadrados
    – IntruzO
    el 19 ene. 2021 a las 21:15
  • Yo dije algo sobre las imagenes por que en tu codigo CSS hay estilos para imagenes lo cual supuse que dentro de tus items habria imagenes, lo cual no quiere decir que la GRID que realice esta hecha para una galeria, te repito prueba con el alto de tus items. el 19 ene. 2021 a las 21:21
  • amigo mi intension no es incomodar, te agradesco bastante la ayuda, me sirvio para ordenar mi items pero si le pongo un alto fijo a los .item me quedara el espacio en blanco hacia abajo
    – IntruzO
    el 19 ene. 2021 a las 21:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.