body {
    width: 90%;
    max-width: 900px;
    margin: 2em auto;
    font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
    display: grid;
    /* grid-template-columns: 200px 200px 200px; */
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-columns: 2fr 1fr 1fr; */
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* grid-auto-rows: 100px; */
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
    gap: 20px;
}

.container>div {
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(207, 232, 220);
    border: 2px solid rgb(79, 185, 227);
}

section {
    margin: 2em auto;
}

section body {
    width: 90%;
    max-width: 900px;
    margin: 2em auto;
    font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

section .container1 {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
}

section header,
section footer {
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(207, 232, 220);
    border: 2px solid rgb(79, 185, 227);
}

section aside {
    border-right: 1px solid #999;
}

/* ----------Posicionamiento sobre las líneas de base--------- */
section header {
    grid-column: 1 / 3;
    grid-row: 1;
}

article {
    grid-column: 2;
    grid-row: 2;
}

aside {
    grid-column: 1;
    grid-row: 2;
}

footer {
    grid-column: 1 / 3;
    grid-row: 3;
}

/* --- Posicionamiento con grid-template-areas --- */
.areas .container1 {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
}

.areas header {
    grid-area: header;
}

.areas article {
    grid-area: content;
}

.areas aside {
    grid-area: sidebar;
}

.areas footer {
    grid-area: footer;
}