Bienvenido al primer post 'piloto' del blog 👋! Como primer punto de partida mostraré un sencillo proceso para crear un div (o cualquier otro elemento de bloque) cuadrado y responsive utilizando únicamente CSS.

Navegando por internet se pueden encontrar múltiples formas de hacerlo, algunas mas 'limpias' que otras. En este post veremos una de ellas.

1. Utilizando el ancho de su pseudo elemento

Una forma muy común de lograr un div 100% responsive es mediante el uso del pseudo-elemento :after.

.square {
  width: 50%;
}

.square:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

Debido a que el padding del pseudo elemento se calcula como el porcentaje del ancho del padre y su padre es nuestro elemento .square, hemos ajustado la altura del pseudo elemento con el ancho del .square. De esta manera, si el ancho de .square cambia también lo hará la altura del pseudo elemento.

2. Añadiendo contenido

Pese a resolver el problema de la caja, si añadimos contenido dentro del elemento .square, éste dejará de ser cuadrado. Esto es debido a que tanto .square como .square:after tienen la misma altura, por lo que al añadir contenido deja de ser un cuadrado.

Afortunadamente lo podemos solucionar de manera sencilla añadiendo una caja .content posicionada de manera absoluta dentro de .square, provocando que el contenido no afecte a sus dimensiones.

<div class="square"> 
  <div class="content"> 
    Hola! 
  </div> 
</div>

.square {
  position: relative;
  width: 50%;
}

.square:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

De este sencillo modo tendremos un div cuadrado al que le podemos añadir contenido sin que se deforme.