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.
* {
box-sizing: border-box;
}
.columna {
float: left;
width: 50%;
padding-right: 5px;
}
.fila::after {
content: "";
clear: both;
display: table;
}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:
img {
/* Para que sea responsiva */
width: 100%;
}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í:
<body>
<div class="fila">
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
</div>
<div class="fila">
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
</div>
</body>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:
Nota: obviamente puedes cambiar la fuente de cada imagen, yo usé la misma para las cuatro, pero puedes usar una fuente distinta.
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í:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cuadrícula de imágenes - By Parzibyte</title>
<!--
https://parzibyte.me/blog
-->
<style>
* {
box-sizing: border-box;
}
.columna {
float: left;
width: 33%;
padding-right: 5px;
}
.fila::after {
content: "";
clear: both;
display: table;
}
img {
/* Para que sea responsiva */
width: 100%;
}
</style>
</head>
<body>
<div class="fila">
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
</div>
<div class="fila">
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
<div class="columna">
<img src="https://picsum.photos/800/600">
</div>
</div>
</body>
</html>La salida ahora es:
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.
