CSS: grid de cuadrados iguales

Dos ejemplos diferentes de como crear un grid con cuadrados iguales usando CSS Grid Layout.

Para los 2 ewjemplos vamos a usar la misma base de grid de 10 columnas:

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

Ejemplo 1

Para hacer cuadrados iguales a los elementos siempre he solido usar un pseudoelemento a los hijos con padding-bottom: 100% para hacerlos de dimensiones cuadradas:

.grid li:before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

Demo:

Ejemplo 2

Otra forma similar, pero diferente es usando también el padding-bottom: 100% pero esta vez en el contenedor del grid y ajustando las filas y columnas del primer elemento hijo con 1 / 1:

.grid:before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}
.grid li:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

Demo: