Comment ajuster la grille d'affichage en fonction de la div parent en html css

Question

HTML

         Le grille d'affichage sera plus petite ou adaptée à la div parent. mais au lieu de s'adapter sur le parent, elle se superpose, ce qui est incorrect. comment réparer cela?

CSS

/* ne rien enlever ici */
.parent {
  display: block;
  width: 452px;
  height: 1038px;
  background: red;
}

.content {
  width: auto;
  display: inline-block;
    transform-origin: 0px 0px 0px;
    transform: matrix(1.51042, 0, 0, 1.51042, 0, 0);
}

.grid {
      height: calc(100% - 35px);
    display: grid;
    gap: 1px 1px;
    background: blue;
    grid-template-columns: 1fr 1fr 1fr; /* ne remplacez pas la valeur */
    grid-template-rows: 1fr 1fr 1fr; /* ne remplacez pas la valeur */
    grid-template-areas:
        "LINE3flr LINE1flr LINE1flr"
        "LINE3flr LINE1flr LINE1flr"
        ". . ."; /* ne remplacez pas la valeur */
}

Le grille d'affichage sera plus petite ou adaptée à la div parent. mais au lieu de s'adapter sur le parent, elle se superpose, ce qui est incorrect. comment réparer cela? cela devrait s'adapter à la div parent.

Exemple: http://jsfiddle.net/tavfbd2o/

Answer 1

Allez-vous faire comme celui-ci ?

.parent {
  display: block;
  width: 452px;
  height: 1038px;
  background: red;
}

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

.grid {
      height: calc(100% - 35px);
    display: grid;
    margin: auto;
    gap: 1px 1px;
    grid-template-columns: 1fr 1fr 1fr; /* ne remplacez pas la valeur */
    grid-template-rows: 1fr 1fr 1fr; /* ne remplacez pas la valeur */
    grid-template-areas:
        "LINE3flr LINE1flr LINE1flr"
        "LINE3flr LINE1flr LINE1flr"
        ". . ."; /* ne remplacez pas la valeur */
}

         L'affichage de la grille sera plus petit ou s'adaptera sur la div parent. mais au lieu de s'adapter sur le parent, il se chevauche, ce qui est incorrect. comment le corriger ?