CSS - GRID

    // GRID LAYOUT PARENT
    display: grid | inline-grid;
    grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
    
    //COLUMNS AND ROWS
    grid-template: 50px 100px / 100px 50px;

    //COLUMNS
    grid-template-columns: [nombreaelegir]100px 50px;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 50px 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: 50px repeat(2, 1fr) 50px;
    grid-columns: 1fr 3fr 2fr;
   
    //ROWS
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
    grid-auto-rows: minmax(100px, auto);
    grid-template-rows: minmax(50px, auto) 100px; Minimum of x and maximum of the content. Auto makes to fill the space needed to fit the text/content
    
    //GAPS
    gaps. row-gap. column-gap. gap:15px;
    grid-gap: 10px
    

    
    // GRID AREAS
    display: grid;
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas: 
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer";

    

    
    // GRID POSITIONING
    justify-content: center, end start. Aling the the content of the parent. Horizontal alignment of all elements in the grid. Si el contenido no ocupa todo el ancho
    align-content: center, start, end. Align grid. Works only when there's height in the parent container and more space than the content. Vertical alignment. Si el contenido no ocupa todo el alto
    Align-items: stretch, start, end, center. Vertical position in the grid cell
    justify-items: stretch, start, end, center. Horizontal positions in the cell
    

    // GRID CHILDREN
    grid-column-start: col-start 2;
    grid-column: 3 / span 2;
    grid-row: third-line / 4;

    //POSITION WITHIN ITS OWN GRID
    align-self: start | center | left | stretch;
    justify-self: start | end | center | stretch;
    place-self: center stretch; /*align-self / justify-self*/
    

    
    // OTHERS
    grid-auto-rows: auto (by default). 100px 200px; - If set to 100px, all new rows added not defined, will be 100px. If there are two values, it will alternate
    grid-auto-columns: auto (by default). 100px 200px; - If set to 100px, all new columns added not defined, will be 100px. If there are two values, it will alternate
    grid-auto-flow: row | column | dense; /*Para evitar dejar huecos  */

    fr. Fractional. Distributes space in fractions / ratios
    place-item: start end; (ponemos la posicion horizontal y vertical