Grid

display: grid;

• Plantilla:
  • grid-template-columns: 200px 150px 20%; | grid-template-columns: repeat(4, 25%);

    fr: ej.: grid-template-columns: 200px 2fr 1fr;

    fr representa el espacio restante.

    Si una columna es 2fr, ocupará el doble que la que sea 1fr

  • grid-template-rows: 5rem 2rem; | grid-template-rows: 5rem minmax(10px, auto) 100px;

    Se puede usar la función fit-content() para que, en caso de requerir más o menos espacio, se adapte. Ej.:

    grid-template-rows: 2.5rem auto fit-content(8rem);

  • grid-template-areas: Se puede establecer un nombre para cada posición del grid y luego utilizarlo en los elementos para indicar desde cuál a cuál tienen que situarse, etc. Ej.:

    grid-template-areas: "header header"
"aside main"
"footer footer"; (se puede poner así para visualizar mejor el grid).

    Luego, a cada item del grid se le indica mediante grid-area a qué área debe pertenecer, lo cual es como indicárselo mediante grid-column-start, grid-row-end, etc.. Ej.:

    .item1 {
background-color: yellow;
/* grid-column-start: 1;
grid-column-end: 3; */
grid-area: header;
text-align: center;
}
.item2 {
background-color: aqua;
text-align: center;
grid-area: aside;
}
.item3 {
background-color: springgreen;
text-align: center;
grid-area: main;
}
.item4 {
background-color: orange;
/* grid-column-start: 1;
grid-column-end: 3; */
grid-area: footer;
text-align: center;
}
  • Posicionamiento:
    • justify-items: colocar todos los items en el eje principal de sus respectivas casillas
    • align-items: colocar items eje transversal (normalmente, vertical) de sus respectivas casillas
    • justify-content: posicionar en el eje principal el grid completo dentro de su contenedor
    • align-content: posicionar en el eje transversal el grid completo dentro de su contenedor
  • Responsive:
    • Ajustar automáticamente las columnas para que ocupen lo que la pantalla requiera:
      • auto-fill: hace que las columnas ocupen los huecos/tamaño que les corresponden, quedando vacíos los huecos que no estén rellenos (ej. resultados de una búsqueda)
        Ej. grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
      • auto-fit: para que las columnas ocupen el total del ancho del contenedor, sin dejar huecos
        Ej. grid-template-columns: repeat(auto-fit, 10rem);
    • Se pueden añadir/quitar filas y/o columnas mediante media-queries y que el grid cambie según el tamaño de la pantalla establecido, pero es mejor la opción de arriba.
  • Flow: Por defecto, al crear un grid, los elementos hijos se sitúan en filas, cuyo tamaño se ajusta al contenido de cada uno de esos hijos. Podemos cambiar ambas:
    • grid-auto-rows: minmax(8rem, auto); Cambia el tamaño de las filas generadas automáticamente, en este ejemplo estableceríamos que como mínimo fueran de 8rem y el máx fuese automático, adaptado a la longitud del contenido.
    • grid-auto-flow: column; Así, cambiaríamos el flujo automático y, en vez de que los hijos apareciesen en filas, aparecerían en columnas
    • grid-auto-columns: 5rem; En caso de cambiar el flujo a column, así estableceríamos el tamaño que quisiéramos a las columnas automáticas.
    • Para que no haya casillas del grid en blanco tras el posicionamiento, se puede añadir dense al lado de grid-auto-flow: row/column dense; así, pero no es recomendable, sólo tenerlo en cuenta.
• Item:
  • grid-column-start: 3; grid-column-end: 5;

    Aplicándolo al Element 3, le decimos que ocupe desde el vértice 3 al vértice 5 de las columnas (había 4 columnas inicialmente, por lo que hay 5 vértices desde el principio hasta el final).

    Eso genera que el siguiente elemento (el 4) pase a la siguiente columna, ya que el 3 ha ocupado su espacio.

  • grid-row-start: 1; grid-row-end: 3;

    Aplicado el Element 3, le decimos que ocupe desde el vértice 1 de las filas al 3.

  • Shorthand column: grid-column: grid-column-start / grid-column-end;

    Ej.: grid-column: 1 / -1; (-1 aplica a la última columna, así no hay que cambiar la cifra de 5 a 6 por ej si añadimos una columna).

  • Shorthand row: grid-row: grid-row-start / grid-row-end;

    Ej.: grid-row: row-1-start (nombre que se puede predefinir mediante []) / span 1; (una fila después) (también sirve en el caso de column, una columna después).

  • Shorthand completo: grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
  • Posicionamiento (sobreescribe lo que pueda haber aplicado para todos los elementos del grid en su conjunto):
    • justify-self: posicionar item en su casilla en el eje principal (horizontal)
    • align-self: posicionar item en su casilla en el eje transversal (vertical)

Grid para Layout (Nav, Main y Footer)

Tenemos dos maneras:

• Manera 1:

  • 2 rows: Una para el main (auto) y otra para el footer (la altura que queramos darle, ej. 3.5rem).

    Añadimos padding-top al main con la altura de la nav, para que se desplace hacia abajo y empiece justo después de la nav.

    Al estar posicionada de forma fija, la nav no forma parte del Document Flow y por eso no necesita su propia fila en el grid.

  • height: 100% al body y al html

    Con esto, provocamos que la row cuya altura es auto ocupe todo el espacio restante de la altura del footer y el padding-top establecido, cuya altura es la de la nav.

• Manera 2 (más correcta):

  • height: 100% al body y al html

  • Agregar 3 filas e indicar a partir de qué vertice comienza el main y a partir de cuál el footer

    Podemos indicarlo mediante:

    • grid-template-rows al body y grid-row al elemento (main, footer, etc.)

      (por ejemplo) body {
margin: 0;
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 2.5rem auto 8rem;
height: 100%;
}
main {
grid-row: 2 / 3;
}
.main-footer {
grid-row: 3 / 4;
}


    • Nombrando las áreas y asignándolas grid-template-rows al body y grid-area a cada elemento del layout (al header/nav no, porque al tener position: fixed está fuera del Document Flow.)

      body {
margin: 0;
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 2.5rem auto 8rem;
grid-template-areas: "header"
"main"
"footer";
height: 100%;
}
main {
/*grid-row: 2 / 3;*/
grid-area: main;
}
.main-footer {
/*grid-row: 3 / 4;*/
grid-area: footer;
}