Foros del Web » Creando para Internet » CSS »

Grid y columnas ordena de forma extraña

Estas en el tema de Grid y columnas ordena de forma extraña en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 22/07/2018, 01:57
Avatar de djboro88  
Fecha de Ingreso: junio-2009
Ubicación: Valencia
Mensajes: 180
Antigüedad: 15 años, 1 mes
Puntos: 2
Pregunta Grid y columnas ordena de forma extraña

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:
Ver original
  1. .columns {
  2.     column-width: 245px;
  3.     column-gap: 15px;
  4.     width: 100%;
  5. }
  6.  
  7. div.columns figure {
  8.     background: #fefefe;
  9.     border: 2px solid #fcfcfc;
  10.     box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  11.     margin: 0 2px 15px;
  12.     padding: 15px;
  13.     padding-bottom: 10px;
  14.     transition: opacity .4s ease-in-out;
  15.     display: inline-block;
  16.     grid-auto-flow: row;
  17.     -webkit-column-break-inside: avoid;
  18.     page-break-inside: avoid;
  19.     break-inside: avoid;
  20. }
  21.  
  22. div.columns figure img {
  23.     width: 100%;
  24.     height: auto;
  25.     border-bottom: 1px solid #ccc;
  26.     padding-bottom: 15px;
  27.     margin-bottom: 5px;
  28. }
  29.  
  30. div.columns figure figcaption {
  31.     font-size: .9rem;
  32.     color: #444;
  33.     line-height: 1.5;
  34. }
  35.  
  36. div.columns small {
  37.     font-size: 1rem;
  38.     float: right;
  39.     text-transform: uppercase;
  40.     color: #aaa;
  41. }
  42.  
  43. div.columns small a {
  44.   color: #666;
  45.   text-decoration: none;
  46.   transition: .4s color;
  47. }
  48.  
  49.  
  50. @media screen and (max-width: 750px) {
  51.   .columns { column-gap: 0px; }
  52.   .columns figure { width: 100%; }
  53. }

¿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.
  #2 (permalink)  
Antiguo 22/07/2018, 04:24
Avatar de djboro88  
Fecha de Ingreso: junio-2009
Ubicación: Valencia
Mensajes: 180
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Grid y columnas ordena de forma extraña

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

Ayuda porfavor
  #3 (permalink)  
Antiguo 22/07/2018, 04:40
Avatar de djboro88  
Fecha de Ingreso: junio-2009
Ubicación: Valencia
Mensajes: 180
Antigüedad: 15 años, 1 mes
Puntos: 2
Pregunta Orden FLEX (column, rows...)

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.
  #4 (permalink)  
Antiguo 22/07/2018, 10:01
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 4 meses
Puntos: 1146
Respuesta: Orden FLEX (column, rows...)

Checate esto
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  #5 (permalink)  
Antiguo 22/07/2018, 11:45
Avatar de djboro88  
Fecha de Ingreso: junio-2009
Ubicación: Valencia
Mensajes: 180
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Grid y columnas ordena de forma extraña

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:
Ver original
  1. @media(min-width:576px){
  2.         .card-columns{
  3.             -webkit-column-count:4;
  4.             -moz-column-count:4;
  5.             column-count:4;
  6.         }
  7.     }
  8.    
  9.     .card{
  10.         -ms-flex-direction: row;
  11.         flex-direction: row;
  12.     }

¿Alguien me podría decir en que falla?
  #6 (permalink)  
Antiguo 24/07/2018, 00:29
Avatar de zanguanga
Moderadora
 
Fecha de Ingreso: julio-2009
Ubicación: España
Mensajes: 1.686
Antigüedad: 15 años
Puntos: 429
Respuesta: Grid y columnas ordena de forma extraña

Parece que estás creando columnas y las columnas se ordenan verticalmente. Yo haría caso a @arturogallegos y usaría flexbox.
__________________
Mi blog personal | Mi G+
  #7 (permalink)  
Antiguo 24/07/2018, 03:40
Avatar de djboro88  
Fecha de Ingreso: junio-2009
Ubicación: Valencia
Mensajes: 180
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Grid y columnas ordena de forma extraña

Entonces con bootstrap, no es posible ordenar las CARDS por columnas?
  #8 (permalink)  
Antiguo 24/07/2018, 08:06
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 4 meses
Puntos: 1146
Respuesta: Grid y columnas ordena de forma extraña

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.

Etiquetas: bootstrap, flex, flexgrid, grid, pinterest
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:38.