Cuadrícula de imágenes con HTML y CSS

En este tutorial sobre diseño web te mostraré cómo mostrar una cuadrícula de imágenes en HTML usando CSS. Vamos a hacer que las imágenes ocupen determinado tamaño de la pantalla usando columnas y filas.

Por ejemplo, hacer una cuadrícula de 2 x 3 imágenes, o de 2 x 2, distribuyendo correctamente el tamaño de la página para que las imágenes tengan el mismo tamaño.

No vamos a usar Bootstrap, solo usaremos CSS, pues Bootstrap ya ofrece clases para hacer este tipo de cosas.

Al final tendremos algo parecido a una tabla de imágenes que ocupan el mismo ancho de la pantalla, usando HTML y CSS.

Diseño CSS

Comencemos viendo el diseño CSS. Como lo dije, vamos a tener filas y columnas. Cada fila tendrá varias imágenes, y habrá varias filas. De este modo, tendremos una cuadrícula.

Definimos el ancho de la columna en 50 %, esto permitirá que tengamos 2 imágenes por fila (imágenes del mismo tamaño) pero además definimos un padding-right para separarlas a la derecha.

Si tú quisieras tener 3 columnas, el porcentaje sería 33 %, si quisieras 4 sería 25 %, etcétera. También definimos el tamaño de las imágenes para que ocupen todo el ancho disponible sin exceder los límites:

Ahora solo necesitamos usar elementos div para posicionar las imágenes y lograr la cuadrícula, usando las clases CSS fila y columna.

Cuadrícula de imágenes con HTML

Es momento de diseñar la cuadrícula. En este caso tendremos 2 filas, con 2 imágenes dentro de cada una. Queda así:

La fuente de las imágenes puede ser cualquiera, yo estoy usando un servicio en línea que da una imagen según la medida especificada, pero realmente esta fuente puede venir de cualquier lugar. Con eso, obtenemos la siguiente salida:

Cuadrícula de imágenes con HTML y CSS

Nota: obviamente puedes cambiar la fuente de cada imagen, yo usé la misma para las cuatro, pero puedes usar una fuente distinta.

Si quieres puedes probar el ejemplo en línea en este enlace.

Otro ejemplo: cuadrícula de 3 imágenes

Ahora te dejaré un ejemplo en donde se muestran 3 imágenes por fila, usando el 33 % del ancho. Recuerda que debemos modificar el CSS para que esto pase. El código completo queda así:

La salida ahora es:

Diseño HTML – cuadrícula de 3 imágenes con CSS

Puedes probar la salida aquí.

De este modo es como puedes diseñar una cuadrícula de imágenes en HTML, simplemente tienes que cambiar el ancho que ocupa cada columna. También puedes cambiar el padding o removerlo.

Te dejo con más tutoriales de HTML y CSS.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario