/* ** Alineamientos                                             */
/* 
        * Alineamientos de items
        * Alineamiento de la cuadrícula
        * Alineación de los items dentro de la celda
        * Order
            */


/* ** Alineamientos de items */
/* 
    4 formas de hacerlos:
        * align-items
        Justifica los elementos dentro de la celda a lo largo del eje de la columna (horizontal).
        * justify-items
        Justifica los elementos dentro de la celda a lo largo del eje de la fila (verical).
                    Sus valores:
                    ...start
                    ...end 
                    ...center 
                    ...strech (por defecto)
                    
        * place-items
        shorthand con los valores de las dos anteriores:
                    ...place-items: align-items justify-items

/* + te suena todo esto???? */

.contenedor {
    /* width: 100vw; */
    /* height: 100vh; */
    /* display: grid; */
    /* grid-template-columns: repeat(4, 1fr); */
    /* align-items: center; */
    /* justify-items: start; */

    /* place-items: center start; */
}



/* ** Alineamiento de la cuadrícula */

/* A veces, el tamaño la cuadrícula puede ser menor que el tamaño del contenedor de dicha cuadrícula. Esto pasa si los items están dimensionados con unidades de medida no flexibles (px). En este caso se puede alinear la cuadrícula con relación al contenedor.
    */
/* * align-content */
/* Alinea la cuadrícula a lo largo del eje de la columna (vertical).
        */
/* * justify-content */
/* Alinea la cuadrícula a lo largo del eje de la fila (vertical).
        */
/* ...justify-content y align-content: start | end | center | stretch | space-around | space-between | space-evenly; */

/* * place-content
        shorthand con los valores de las dos anteriores: 
        ...place-content: align-content justify-content*/


.contenedor {

    /* +Con width y con height hacemos que el contenedor ocupe todo el viewport */

    /* width: 100vw; */
    /* height: 100vh; */
    /* display: grid; */
    /* grid-template-columns: 100px 100px 150px; */
    /* grid-template-rows: repeat(4, 150px); */

    /* align-content: center; */
    /* justify-content: center; */

    /* place-content: end end; */

    /* align-content: space-between; */
    /* justify-content: center; */

    /* + ve probando!!! todo te sonará */
}


/* **Alineación de los items dentro de la celda */

/* Con estas propiedades podemos alinear items determinados... */
/* sus valores ---- start | end | center | stretch */
/* El valor strech sería su valor por defecto. */

/* * justify-self */
/* Alinea un elemento de la cuadrícula dentro de una celda a lo largo del eje horizontal. */

/* * align-self */
/* Alinea un elemento de cuadrícula dentro de una celda a lo largo del eje vertical. */

/* * place-self */
/* shorthand de justify-self y align-self  */


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

.caja:nth-child(5) {
    /* width: 100px; */
    /* height: 50px; */

    /* justify-self: center; */
    /* align-self: center; */

    /* place-self: end center; */
}


/* ** Order     */

/* Funciona igual que en FLEX (cambiamos el orden de los items)... ya lo habrás pillado... xd... revisemos unos ejemplos */
/* + todos tienen el valor "0" */

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

.caja:nth-child(12) {
    /* order: -1; */
}

.caja:nth-child(n+7) {
    /* order: -1; */
}

.caja:nth-child(12) {
    /* order: -2; */
}