in ,

Crear columnas con CSS Grid

Vista previa:

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));

Mostrar elementos / contenido por Perfiles de usuario WordPress

Crear entradas destacadas con HTML y CSS