Grid y columnas ordena de forma extraña

[djboro88]

Hola a todos !!

Estoy haciendo unas pruebas en "https://www.salvadorreyes.es/dronex/"

Como podeis ver es una grid con una serie de provincias de españa. Si desplazamos la ventana hacia abajo, vemos que cargan más provincias. Ese no es el problema, porque vemos que cargan a medida que se desplaza la página.

El problema real de este post, es el orden en el que se ordenan los objetos. En la consulta se indica que se ordende de forma ASCENDENTE (de la A a la Z), pero la idea es que se muestren uno al lado del otro en dicho orden.

Como podéis ver el orden que crea, es primero la columna izquierda, centro y derecha, en vez de que aparezca cada provincia una al lado de la otra.

El CSS que estoy utilizando es este:

Código CSS:

.columns {
    column-width: 245px;
    column-gap: 15px;
    width: 100%;
}
 
div.columns figure {
    background: #fefefe;
    border: 2px solid #fcfcfc;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    padding: 15px;
    padding-bottom: 10px;
    transition: opacity .4s ease-in-out;
    display: inline-block;
    grid-auto-flow: row;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
 
div.columns figure img {
    width: 100%; 
    height: auto;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
 
div.columns figure figcaption {
    font-size: .9rem;
    color: #444;
    line-height: 1.5;
}
 
div.columns small { 
    font-size: 1rem;
    float: right; 
    text-transform: uppercase;
    color: #aaa;
} 
 
div.columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}
 
 
@media screen and (max-width: 750px) { 
  .columns { column-gap: 0px; }
  .columns figure { width: 100%; }
}
 

¿Alguna idea de como conseguirlo?

NOTA:
La idea principal es hacer un grid similar al de pinterest o wallapop. Que indiferentemente del tamaño del item, se ajuste o adapte al anterior.

[djboro88]

Ahora estoy usando las CARDS de Bootstrap, pero curiosamente me pasa lo mismo con el orden y no se como corregirlo...

Ayuda porfavor

[djboro88]

Hola a todos !!

Estoy haciendo unas pruebas en "https://www.salvadorreyes.es/dronex/"

Como podeis ver es una grid con una serie de provincias de españa. Si desplazamos la ventana hacia abajo, vemos que cargan más provincias. Ese no es el problema, porque vemos que cargan a medida que se desplaza la página.

El problema real de este post, es el orden en el que se ordenan los objetos. En la consulta se indica que se ordende de forma ASCENDENTE (de la A a la Z), pero la idea es que se muestren uno al lado del otro en dicho orden.

Como podéis ver el orden que crea, es primero la columna izquierda, centro y derecha, en vez de que aparezca cada provincia una al lado de la otra.

Estoy usando BS4 y tengo un diseño de CARDS
Más info: http://getbootstrap.com/docs/4.0/com.../#card-columns

¿Alguna idea de como hacer que aparezcan una al lado de la otra en orden alfabético?

Gracias.

[ArturoGallegos]

Checate esto
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[djboro88]

He chekeado, lo que me has compartido, pero... Por más que lo intento no doy con la tecla...
Os adjunto una captura, para que veais el orden que genera.



Lo que pretendo, es que el orden sea de izquierda a derecha.
Si lo observáis el orden que tiene es de arriba/abajo, algo que no me interesa.

El único css que estoy usando es una modificación del de bootstrap:

Código CSS:

@media(min-width:576px){
        .card-columns{
            -webkit-column-count:4;
            -moz-column-count:4;
            column-count:4;
        }
    }
    
    .card{
        -ms-flex-direction: row;
        flex-direction: row;
    }
 

¿Alguien me podría decir en que falla?

[zanguanga]

Parece que estás creando columnas y las columnas se ordenan verticalmente. Yo haría caso a @arturogallegos y usaría flexbox.

[djboro88]

Entonces con bootstrap, no es posible ordenar las CARDS por columnas?

[ArturoGallegos]

Su mismo nombre lo dice

Card columns

Lo mas sencillo es usar flex, que si quieres aventurarte agrega una clase personal al de bootstrap y sobre escribelo.
Eso si examina el código para escoger que elemento llevara esa clase y que estilos sobre escribir.

No es imposible pero si tendrás que experimentar tu mismo., yo nunca lo he hecho por eso no meto mis manos.