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.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%; }
}
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.