Grid-area !

On peut définir des zones très facilement en nommant les lignes et les colonnes.


Dans le simulateur grid inserer le code suivant : 

Définition de la grille 

.conteneur {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: [side-start] 100px [main-start] 1fr 1fr [main-end];
  grid-template-rows: [main-start] 20px
                                                   20px
                                                   20px
                                 [main-end];
padding : 5px;
     }

Affectation du bloc #it1 à la zone main :

     #it1 {
                grid-area: main;
     }