body {
    background-color: black;
    margin: 0;
    padding: 0;
}
#grille {
    /* accès aux propriétés grid avec
    comportement par défaut stretch*/
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Adapte la hauteur en fonction du contenu
    fonction : 200px minimale  et auto pour le contenu */
    grid-template-rows: 100px minmax(200px,auto) 100px;
    background-color: #fff;
    width: 90%;
    margin: auto;
    grid-template-areas:
                "header header"
                "article nav"
                "footer footer";
}
.content {
    padding: 20px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #888;
}
P {
    color: #fff;
}
header {
    background-color: #f00;
    /* attribue un nom à la zone */
    grid-area: header;
}
nav {
    background-color: #0f0;
    grid-area: nav;
}
article {
    background-color: #00f;
    grid-area: article;
}
footer {
    background-color: #800;
    grid-area: footer;
}
@media screen and (max-width: 850px ){
    #grille {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 4fr 1fr;
        grid-template-areas:
                    "header"
                    "nav"
                    "article"
                    "footer";
    }
}