Disposition carrée de la grille CSS

Question

J'essaie de créer une grille/disposition composée de carrés. Quatre carrés dans chaque rangée. Les carrés ne peuvent pas déformer le redimensionnement de l'écran. La largeur et la hauteur doivent toujours être les mêmes (je ne veux pas de valeurs fixes). Je dois utiliser la grille CSS. Quelqu'un peut-il m'aider ?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

** La réponse de @ fcalderan résout le problème et tous les crédits réservés. **

Cela casse évidemment la forme carrée, mais si vous utilisez un texte, un petit ajustement fonctionnera en votre faveur. Vous pouvez plutôt utiliser le ::after pseudo-élément pour ne pas pousser vers le bas ou diviser le contenu potentiel. Passer à display: block supprime également la nécessité de vertical-aling: top Pour autant que je sache.

Pour conserver davantage le rapport hauteur/largeur lors de l'utilisation de texte, je ferais le texte position: absolute.

Voir l'extrait ci-dessous lors de l'utilisation de ::before contre. ::after pour illustrer mon propos.

.container,
.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

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

.container2 div::after {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.container2 .text {
  position: absolute;  
}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
}

<div class="container">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>
  
  <hr>
  <div class="container2">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>