<aside> 💡 CONTENEDOR display: grid;

</aside>

<aside> 💡 COLUMNAS Y FILAS DEFINIDAS grid-template-columns: 80px 80px; grid-template-rows : 80px 80px;

COLUMNAS Y FILAS AUTOMATICAS grid-auto-columns: 100px grid-auto-rows : 100px

UBICACION DE LOS ELEMENTOS grid-auto-flow : column;

ESPACIADO DE LOS ELEMENTOS gap : 30px column-gap : 30px row-gap : 30px

</aside>

<aside> 💡 ALINEACION

</aside>

<aside> 💡 CONTENEDOR PADRE Justify-content ( Alineacion horizontal ) Align-content ( Alineacion vertical ) Place-content ( Fusion )

HIJOS DEL CONTENEDOR Justify-items ( Alineacion horizontal ) Align-items ( Alineacion vertical ) Place-items ( Fusion )

HIJOS INDIVIDUALES Justify-self ( Alineacion horizontal ) Align-self ( Alineacion vertical ) Place-self ( Fusion )

</aside>

<aside> 💡 ALINEACION

</aside>

<aside> 🔥 UBICACION grid-column-start : 1; grid-column-end : 4; grid-row-start : 1; grid-row-end : 4;

SIMPLIFICADA grid-column: 1 / 4; ****grid-row : 2 / 4 ;

AREA grid-area: 2 / 2 / 4 / 4 ; ( Fila inicial / Columna Inicial // Fila final / Columna final )

PADRE grid-template-areas : ”Header Header Header” ”Side Main Main” ”Side Main Main” HIJO grid-area: Header;

</aside>

<aside> 💡 FUNCIONES ESPECIALES

</aside>

<aside> 🔥 CRECIMIENTO minmax (30px, 300px) min-content (Ancho minimo que necesita el contenido para mantenerce) max-content (Ancho maximo que necesita el contenido para mantenerce) 1fr min-content 3fr …

AJUSTE repeat (3, auto);

RELLENO auto-fill : Agrega columnas “fantasma” que rellenan el espacio sobrante del contenedor. auto-fit : ensancha las columnas para que ocupen todo el espacio del contenedor.

</aside>

<aside> 💡 FUNCIONES

</aside>

<aside> 🔥 AUMENTAR TAMAÑO transform: scale(1.2); cursor: pointer;

FONDOS background-image: url(” “) background-position: center; background-position: no-repeat; background-size:cover; position: relative;

</aside>

<aside> 💡 PROYECTO

</aside>

<aside> 🔥 https://sartheghost.github.io/GRID/

</aside>