Cargando contenido...
.grid{
display:grid;
grid-template-columns: repeat(3,1fr); /* 3 columnas */
grid-column-gap:5px;/* margen horizontal */
grid-row-gap:5px;/* margen vertical */
grid-auto-rows: minmax(100px, auto);/* altura columnas */
margin-bottom:5px;
}
.even{
grid-column: 2 / span 2;/* de 3 columnas la 2 -- -*/
}
.odd{
grid-column: 1 / span 2;/* de 3 columnas la 1 - --*/
}
/* Cambiamos a 2 columnas */
@media(max-width:768px){
.grid{grid-template-columns: repeat(2,1fr);}
.even,.odd{grid-column: span 1;}
}
/* Cambiamos a 1 columna */
@media(max-width:480px){
.grid{grid-template-columns: repeat(1,1fr);}
.odd,.even{grid-column: 1;}
}