não pode se esquecer que para que as posições do grid-template-areas funcione, vamos ter que configurar cada posição do html no css, por exemplo no html criei a propriedade, header, section, nav, footer e uma div com uma class ad, no css vou editar header: grid-area:"e um nome para cada uma delas" ainda no html, preciso criar uma class item para cada uma das divs, e no css edito essa classe item com o tamanho gap e um padding, ainda o font-size.