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