/* GRID TEMPLATE PARA 4 COLUMNAS */
@media only screen and (min-width: 1200px) {
    [class*='template'] > div {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 25% 25% 25% 25%;
    }

    .template1 > div {
        grid-template-areas: "a a a a" "b b b b" "c c c c" "d d d d";
    }

    .template2 > div {
        grid-template-areas: "a a b b" "a a b b" "c c d d" "c c d d";
    }

    .template3 > div {
        grid-template-areas: "a a a a" "b b c c" "b b c c" "d d d d";
    }

    .template4 > div {
        grid-template-areas: "a b b b" "a b b b" "a b b b" "c c c c";
    }

    .template5 > div {
        grid-template-areas: "a b b b" "a b b b" "a b b b" "c c d d";
    }

    .template6 > div {
        grid-template-areas: "a b b d" "a b b d" "a c c d" "a c c d";
    }

    .template7 > div {
        grid-template-areas: "a b b b" "a b b b" "a c c c" "a c c c";
    }

    .template8 > div {
        grid-template-areas: "a a a b" "a a a b" "d d d b" "d d d b";
    }

    .template9 > div { /*DATOS GENERALES*/
        grid-template-areas: "a a b b" "a a c c";
    }
}

/* GRID TEMPLATE PARA 6 COLUMNAS */
@media only screen and (min-width: 1200px) {
    [class*='template6col'] > div {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(6, 1fr); /* 6 columnas iguales */
    }

    .template6col-1 > div {
        grid-template-areas: 
            "a a a a a a"
            "b b b b b b"
            "c c c c c c"
            "d d d d d d";
    }

    .template6col-2 > div {
        grid-template-areas: 
            "a a a b b b"
            "a a a b b b"
            "c c c d d d"
            "c c c d d d";
    }

    .template6col-3 > div {
        grid-template-areas: 
            "a a a b b b"
            "a a a c c c"
            "a a a d d d"
            "a a a d d d";
    }

    .template6col-4 > div {
        grid-template-areas: 
            "a a b b c c"
            "a a b b c c"
            "d d d d d d"
            "d d d d d d";
    }

    .template6col-5 > div {
        grid-template-areas: 
            "a a a a a a"
            "b b c c d d"
            "b b c c d d"
            "b b c c d d";
    }

    .template6col-6 > div {
        grid-template-areas: 
            "a a b b c c"
            "a a b b d d"
            "a a b b d d"
            "a a b b d d";
    }
}

[class*='grid-area-']{
    height: 100%;
}

.grid-area-a {
    grid-area: a;
}

.grid-area-b {
    grid-area: b;
}

.grid-area-c {
    grid-area: c;
}

.grid-area-d {
    grid-area: d;
}

.grid-area-e {
    grid-area: e;
}

.grid-area-f {
    grid-area: f;
}