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: 1fr 2fr;
    grid-template-rows: 1fr 4fr 1fr;
    background-color: #fff;
    width: 90%;
    height: 600px;
    margin: auto;
    grid-template-areas:
                "header header"
                "nav article"
                "footer footer";
}
.content {
    padding: 20px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #888;
}
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;
}