.container2 {
    padding: 2em;
}
.grid {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows:repeat(6,1fr);
    gap:1rem;
}
h2, h3 {
    margin:0;
}

.bloc-header {
    background-color: #ddd;
    grid-column-start:1;
    grid-column-end:col5-end;
    grid-row-start:1;
    grid-row-end: span 1;
}
.bloc-article-1 {
    background-color : #fff;
    grid-column-start:1;
    grid-column-end:span 3;
    grid-row-start: 2;
    grid-row-end: span 4;
}
.bloc-article-2 {
    background-color: #fc3;
    grid-column-start:4;
    grid-column-end:span 1;
    grid-row-start: 2;
    grid-row-end: span 2;
}
.bloc-article-3 {
    background-color: #fa3;
    grid-column-start:5;
    grid-column-end:span 1;
    grid-row-start: 2;
    grid-row-end: span 2;
}
.bloc-article-4 {
    background-color: #f83;
    grid-column-start:4;
    grid-column-end:span 2;
    grid-row-start: 4;
    grid-row-end: span 2;
}
.bloc-footer {
    background-color: #bbb;
    grid-column-start:1;
    grid-column-end:span 5;
    grid-row-start: 6;
    grid-row-end: span 1;
}
/*AREAS*/
section header, section nav, section main, section aside, section footer {
    padding: 1em;
}
section nav a {
	display: block;
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid;
}

.grid2 {
    display: grid;
    gap: 1em;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 17% auto 17%;
}

header {
    background-color: #ddd;
    grid-area: header;
}
nav {
    background-color: #fc3;
    grid-area:nav;
}
main {
    background-color: #fff;
    grid-area:main;
}
aside {
    background-color: #fa3;
    grid-area:aside;
}
footer {
    background-color: #bbb;
    grid-area:footer;
}