Aplicamos HTML:
Agregamos los elementos con sus clases
<div class="grid"> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> <div class="grid-element"><img src="https://gszone.org/wp-content/uploads/2022/07/WordPress_jak_zaczac.jpg"></div> </div>
Aplicamos CSS:
Agregamos el CSS que mostrará 2 columnas en dispositivos móviles, 3 columnas en Tablet, y 4 columnas en PC. Todo con un espacio de 20px entre los elementos
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.grid-element img {
width: 100%;
}
/* Vista movil */
@media (max-width: 425px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Vista tablet */
@media (max-width: 768px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}Para cambiar el numero de columnas que se quiera mostrar, modifica el numero de esta linea:
grid-template-columns: repeat(4, minmax(0, 1fr));See the Pen Crear columnas con CSS Grid by Gustavo (@gusta1996) on CodePen.
