Crear columnas con CSS Grid

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO
close