/* ! Conforme estes avanzando por los apartados, comenta los códigos para que no interactúen entre ellos /// SI ESTÁS CAMBIANDO EL CÓDIGO DENTRO DEL NAVEGADOR, TAN SOLO TENDRÁS QUE RECARGAR LA PÁGINA (CRTL+R)*/

/* **                                                         
**___  CSS-GRID                                               
**                                                          */

/*  Grid nace de la necesidad de colocar y distribuir los diferentes elementos webs dentro del layout. A diferencia de FLEX (grid bebe de las formas de trabajar de flex...), GRID posee en sistema en dos direcciones, eje X y eje Y.
Se define como un sistema de maquetación basado en GRILLAS (cuadrícula), bidimensional y flexible. Es decir, podremos construir cuadrículas dinámicas
*/

/* ** ___ Conceptos teóricos             */

/* Para activar la cuadrícula grid hay que utilizar sobre el elemento contenedor la propiedad display y especificar el valor grid o inline-grid. Este valor influye en como se comportará la cuadrícula con el contenido exterior. El primero de ellos permite que la cuadrícula aparezca encima/debajo del contenido exterior (en bloque) y el segundo de ellos permite que la cuadrícula aparezca a la izquierda/derecha (en línea) del contenido exterior. */

/* ................................................ */

/* Se necesita un contenedor --GRID-CONTAINER-- donde aplicaremos la "gran" propiedad (DISPLAY: GRID) y, por lo menos, un hijo --GRID-ITEM-- (en nuestro ejemplo de clase jugaremos con 12- grupo apostólico). */

/* GRID-CONTAINER (contenedor): elemento padre que agrupa a todos los items. Define la cuadrícula.
GRID-ITEM: son cada uno de los hijos directos que define la cuadrícula (contenedor) */

/* GRID COLUMN (columna)
GRID ROW (fila)
GRID CELL (celda)
GRID GAP (espacio entre celdas)
GRID LINE (línea horizontal o vertical que separa las diferentes celdas de la cuadrícula)
    COLUMN-LINE (vertical) Y CROW-LINE (horizontal)
GRID TRACK (banda hozontal o vertical de las cendas de la cuadrícula)
GRID AREA (conjunto de celdas agrupadas de la cuadrícula) */


/* ------------------------------ */

/* +EMPECEMOS A VERLO  */


/* ** Creando la cuadrícula:                              */

    /* * display: grid | inline-grid  */

    /* Indicará como se comportará la cuadrícula con los elementos del exterior de ella:
    --- Valor grid: actua como bloque, hace que la cuadrícula aparezca encima o debajo del contenido exterior.
    --- Valor inline-grid: se comorta como elemento en línea, haciendo que la cuadrícula aparezca a la derecha o a la izquierda de los elementos del exterior. */

    /* * grid-template-columns y grid-template-rows*/

    /* Estas propiedades generan la cuadrícula, el número de filas y columnas que tendrá la cuadrícula; y su tamaño (en cuanto que dichas filas y colunas se especificarán con sus medidas respectivas). */

    /* grid-template-columns: 200px 200px 200px;
    diseña una cuadrícula que tendrá 3 columnas de 200px de ancho cada una */
    /* grid-template-rows: 100px 100px 100px 100px;
    diseña una cuadrícula que tendrá 4 filas de 100px de alto cada una  */

    /* *grid-column-gap y grid-row-gap ..... shorthand: grid-gap */

    /* Establece el espacio entre columnas y filas respectivamente. Siento su shorthand el que engloba dcihas propiedades */

.contenedor{ 
    /* display: grid; */
 

    /* +------------------------------------------ */

    /* Para empezar a disponer columnas debemos indicar el número de ellas señalando cada una de sus medidas... en nuestro caso tendríamos 3 columnas de 150px cada una ... pudiendo cambiar los tamaños como queramos... haz pruebas..... IMPRESIONANTE */

    /* grid-template-columns: 20vw 20vw 20vw; */

    /* También podríamos poner columnas con las medidas que quisieramos... todo puro dinamismo... */

    /* grid-template-rows: 100px 200px 100px 150px; */

    /* +------------------------------------------ */

    /* grid-column-gap: 10px; */
    /* grid-row-gap: 10px; */
    /* lo usual es usar su shorthand o propiedades abreviadas: */
    /* grid-gap: 25px; */
    /* gap: 25px; */
    
}

    /* * SHORTHAND DE CREACIÓN DE CUADRÍCULAS */

    /* ... grid: grid-template-rows / grid-template-columns */

    .contenedor{
        /* display: grid; */
        
        /* grid-template-rows: 100px 200px 100px 200px; */
        /* grid-template-columns: 200px 200px 400px; */

        /* grid: 100px 200px 100px 200px / 200px 200px 400px; */
    }



/* **___ M  E  D  I  D  A  s                               */

/* * ____ fr "la fraccionaria" */

/* Además de las ya conocidas, grid cuenta con varias medidas interesantes:
    --- fr ... una genialidad. */
    

.contenedor{
    /* width: 90vw; */
    /* height: 100vh; */
    /* display: grid; */
    /* grid-template-columns: 150px 20% 50vw; */
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-rows: 1fr 2fr 2fr 1fr; */
}



/* * ___ la función repeat () */

/* Usado para repeticiones de medidas... */

.contenedor{
    /* display: grid; */
    /* grid-template-columns: repeat(4, 150px); */
    /* grid-template-rows: 50px repeat(2, 150px) 500px; */
}

/* * ___ Creación de patrones con repeat().  */

.contenedor{
    /* display: grid; */
    /* grid-template-columns: repeat(3, 80px 200px); */
    /* grid-template-rows: repeat(3, 80px 40px); */
}

/* * ___ Uso de mìnimos y máximos en las medidas... */

    /* * minmax(): */
    /* Cuenta con dos valores y nos señala el mínimo y el máximo que pueden tener los items. */

    /* * min-content y max content */
    /* --- min-content: mínimo necesario en función del contenido.
    --- max-content: máximo necesario en función del contenido. */

    /* * auto-fill y auto-fit */
    /* --- auto-fill: crea tantos items vacios como quedan en el viewport, respatando las medidas (llena de items).
    --- auto-fit: elimina los items vacios que no se estén ocupando (austa los items). */

        /* + minmax(nº,nº) */

        .contenedor{
            /* display: grid; */
            /* height: 100vh; */
            /* grid-template-columns: repeat(3, minmax(250px, 500px)); */
            /* grid-auto-rows: 50px minmax(100px,300px) 1fr 1fr; */
        }

        /* ----------------------------------------- */

        /* + sustitución del valor (nº) por el término min-content y max-content */

        .contenedor {
            /* display: grid; */
            /* height: 100vh; */
            /* grid-gap: 20px; */
            /* grid-template-columns: repeat(3, minmax(max-content, 600px)); */
            /* grid-auto-rows: 100px minmax(100px, 300px) 1fr 1fr; */
        }

        .caja:nth-child(11)::before{
            /* content: "vamos que nos vamos, este texto no es pequeño"; */
        }

        /* ----------------------------------------- */

        /* Pensad por un momento lo que todo esto supone... podríamos crear las famosas cuadrículas de 12 columnas en un abrir y cerrar de ojos... solo es una línea de código... grid-template-columns: repeat(12, 1fr)... ES ALGO ALUCINANTE ...*/

        /* ----------------------------------------- */


/* ** CREACIÓN AUTOMÁTICA DE CUADRÍCULA Y DISPOSICIÓN DE ITEMS. */

    /* ! comenta unos cuantos items del html ... deja las 6 primeras */

    /* * auto-fill y auto-fit */

    /* + sustitución del valor de repeat (nº) por el término auto-fill y auto-fit */

    /* --- auto-fill: Coloca todas las celdas que quepan en ese tamaño de pantalla.
    --- auto-fit: Coloca todas las celdas que quepan en ese tamaño de pantalla, igual que lo hace auto-fill... pero elimina todas aquellas que no se necesiten. */

    .contenedor{
        /* width: 100vw; */
        /* display: grid; */
        /* grid-template-columns: repeat(3, minmax(200px, 1fr)); */

        /* Coloca todas las celdas que quepan en ese tamaño de pantalla...*/
        /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */

        /* Coloca todas las celdas que quepan en ese tamaño de pantalla, igual que lo hace auto-fill... pero elimina todas aquellas que no se necesiten */
        /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    }

    /* ! Para que puedas valorar mejor la diferencia entre ellos, comenta el primer div-contenedor y activa los dos siguientes (fill - fit) */

    .fill{
        /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) */
    }

    .fit {
        /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) */
    }

    /* es genial que te convierta la cuadrícula en DINÁMICA */

    /* ! Vuelve a dejar el html como estaba (solo con el div-contenedor activado y sus 12 cajas) /// o CRTL+R en el navegador */


    /* * GRILLA IMPLÍCITA Y EXPLÍCITA */

    /* - Grilla explítita: es la grilla o cuadrícula diseñada por los valores.
    - Grilla implícita: es la zona creada automáticamente por el algoritmo de grid para sotener a los items restantes. */
    .contenedor{
        /* display: grid; */
        /* grid: 100px 100px 100px / 200px 200px 200px; */
    }

    /* ! Vamos a exagerar un poco la historia... desactiva el primer contenedor y activa el último, de 100 elementos, en el html del ejercicio */


    /* * Fluir de ITEMS dentro de la cuadrícula. */

    /*  grid-auto-flow: row | column */
    /* con el valor row por defecto... los items se alinean como filas. */


    /* * grid-auto-rows y grid-auto-columns */

    /* Propiedad que proporciona valores a los items situados en la zona implícita:
    - grid-auto-rows: en las filas implícitas.
    - grid-auto-columns: en las columnas implícitas. */

    /* * grid-auto-flow: row | column | row dense | column dense */

    /* --- row: completa cada fila por turno, agregando nuevas filas según sea necesario (predeterminado).
    --- column: completa cada columna a su vez, agregando nuevas columnas según sea necesario.
    --- dense: intentará rellenar agujeros en la cuadrícula si aparecen elementos más pequeños más tarde. */

    .contenedor{
        /* width: 100vw; */
        /* height: 100vh; */
        /* display: grid; */


        /* grid-template-columns: repeat(auto-fit, minmax(200px, 500px)); */
        /* grid-template-rows: repeat(auto-fit, minmax(250px, 500px)); */

        /* grid-auto-rows: minmax(250px, 500px); */

        /* grid-auto-flow: column; */
        /* grid-auto-columns: minmax(250px, 1fr); */
    }



/* ! Desactiva el gran contenedor (último) y vuelve a activar el primer contenedor en el .html ... VOLVEMOS A NUESTROS ORÍGENES... */



/* ** CREANDO ÁREAS.                           */
/* + PROPIEDADES DE LOS HIJOS--- ITEMS */

/* Podemos crear áreas dentro de nuestra cuadrícula ayudándonos de las líneas que van a encerrar estas áreas. Las líneas horizontales (row-line) delimirán la parte superior e inferior del área y las verticales (column-line) delimitarán su parte izquierda y derecha. */

/* * grid-column-star y grid-column-end  */
/* Situación de la column-line donde empieza el elemento y column-line dónde termina. (ej: el elemento 5 empieza en el column-line 2 y termina en el column-line 3). */

/* * grid-row-star y grid-row-end  */
/* Situación de la row-line donde empieza el elemento y row-line dónde termina. (ej: el elemento 5 empieza en el row-line 2 y termina en el column-line 3). */

/* +------------------------------------------ */

/* * grid-column y grid-row*/

/* --- grid-column: nº/nº (representa 1ª column-line/última column-line).
    --- grid-row: nº/nº (representa 1ª row-line/última row-line). */

/* +------------------------------------------ */

/* * SPAN  */
/*  Parte de un valor que indica las celdas que ocupa, para ello se tendrá que especificar primero la línea donde empieza el área y seguido el valor "span" con el número de celdas que ocupará dicha área */


.contenedor {
    /* display: grid; */
    /* grid-template-columns: 150px 150px 150px 150px; */
    /* grid-template-rows: 150px 150px 150px 150px 150px; */
}

.caja:nth-child(12) {
    /* background: coral; */
    /* grid-column-start: 1; */
    /* grid-column-end: 3; */

    /* grid-row-start: 2; */
    /* grid-row-end: 4; */
}

/* observa....curiosidad */
.caja:nth-child(2) {
    /* background: rgb(241, 37, 30); */
    /* grid-column-start: 1; */
    /* grid-column-end: 3; */
    /* ---- observa */
    /* grid-row-start: 2; */
    /* grid-row-end: 4; */
}

.caja:nth-child(2) {
    /* background: rgb(158, 196, 71); */

    /* abreviando que es gerundio */
    /* grid-column: 4/-1; */
    /* grid-row: 1/4; */
}

/* - - - - NOTA: propiedad order */

.caja:nth-child(1) {
    /* background: rgb(91, 174, 180); */

    /* empieza en la line-column 1 y te expandes 4 columnas */
    /* grid-column: 1/ span 4; */
    /* empieza en la line-row 4 y te expandes 2 filas */
    /* grid-row: 4/span 2; */
}

/* ** Nombrando áreas (colocando de forma textual).       */

/* * grid-template-areas */
/* Dispone las áreas con nombres sobre la cuadrícula... OBSERVA, ES CASI MÁGICO */

.contenedor{
    /* display: grid; */

    /* por ver el diseño facilón que pusimos en la prueba con FLEX: */
    /* grid-template-areas:  */
    "nav       nav       nav       nav"
    "imagen    imagen    imagen    imagen"
    "articulo  articulo  articulo  articulo"
    "presen    presen    presen    presen"
    "footer    footer    footer    footer";
}

.caja:nth-child(1){
    /* grid-area: nav; */
}
.caja:nth-child(2) {
    /* grid-area: imagen; */
}
.caja:nth-child(3) {
    /* grid-area: articulo; */
}
.caja:nth-child(4) {
    /* grid-area: presen; */
}
.caja:nth-child(5) {
    /* grid-area: footer; */
}
/* ! Desactivemos aquellos items implícitos en el html */
/* disponemos las áreas en las cuadrículas pero no las medidas */

.contenedor{
    /* width: 100vw; */
    /* height: 100%; */
    
    /* grid-template-rows: 50px repeat(3, 100vh) 80px; */
    /* grid-template-columns: repeat(4, 1fr); */
}

/* + ------------------------------------------------- */

/* ESTE TE SONARÁ MÁS... */

.contenedor{
    /* width: 100vw; */
    /* height: 100%; */
    /* display: grid; */
    /* grid-template-areas:  */
    "header      header      header"
    "section    section      aside"
    "section    section      aside"
    "footer      footer      footer";
    /* grid-template-rows: repeat(3, 500px) 80px; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* gap: 10px; */
}

.caja:nth-child(1) {
    /* grid-area: header; */
}

.caja:nth-child(2) {
    /* grid-area: section; */
}

.caja:nth-child(3) {
    /* grid-area: aside; */
}

.caja:nth-child(4) {
    /* grid-area: footer; */
}

/* ! Está claro... comentamos la caja 5 de nuestro html */

/* demos medidas */