CSS GRID

Lo que debes saber

CSS GRID Lo que debes saber

1- De dónde venimos

  • Una única columna / cuerpo de contenido
  • Tablas.
    • Con imágenes GIF (spacers).
  • CSS Moderno
    • Estilos externos.
  • Floats.
    • Hack.
  • RWD.
    • Diversidad de dispositivos.
  • Flexbox.
  • CSS GRID.

CSS GRID Lo que debes saber

3- CSS GRID vs FlexBox

El módulo de posicionamiento CSS GRID no sustituye a FlexBox sino que lo complementa, como iremos viendo.

FlexBox

CSS GRID

  • 1 dimensión.
  • Document flow normal.
  • 2 dimensiones.
  • Líneas y áreas GRID.
  • Alineado en filas y columnas.

CSS GRID Lo que debes saber

2- Qué es CSS GRID

CSS GRID es un nuevo módulo de posicionamiento CSS, al igual que FlexBox y BlockBox.

 

CSS GRID permite crear rejillas descritas en CSS y que se comportan de forma independiente de su emplazamiento en el HTML. Así, CSS GRID permite separar el orden de definición en el código fuente de su representación visual.

 

CSS GRID puede convertirse en el nuevo estándar para la maquetación Web (junto con FlexBox) y es aceptado por la mayoría de navegadores Web.

CSS GRID Lo que debes saber

4- Conceptos esenciales

Junto con la nueva especificación del módulo CSS GRID vienen algunos términos y conceptos que hay que entender para poder comenzar a usarlo.

GRID Container & GRID Item

El elemento que hace de rejilla/contenedor y cada uno de los items que se muestran dentro. Esta relación parent/children es llamada GRID context.

/* Declarando un GRID container */
main {
    display: grid;
}

CSS GRID Lo que debes saber

4- Conceptos esenciales

GRID Line

El contenedor GRID está formado por dos tipos de líneas: horizontales y verticales.

Las líneas horizontales corren a través del eje X del contenedor GRID y las verticales corren a través del eje Y.

 

Podemos hacer referencia a una GRID line por número o por nombre.

Ilustraciones: http://gridbyexample.com/what/

CSS GRID Lo que debes saber

4- Conceptos esenciales

GRID Track

Nombre genérico para un GRID row o GRID column.

 

Es el espacio vertical u horizontal entre dos GRID lines consecutivas.

 

Define la altura de un GRID column o la anchura de una GRID row.

Ilustraciones: http://gridbyexample.com/what/

CSS GRID Lo que debes saber

4- Conceptos esenciales

GRID Cell

La intersección de un GRID row y un GRID column es llamada GRID cell, es decir, el espacio entre 4 GRID lines.

 

Es, además, la unidad más pequeña a nuestra disposición para colocar un GRID item.

Ilustraciones: http://gridbyexample.com/what/

CSS GRID Lo que debes saber

4- Conceptos esenciales

GRID Area

Es cualquier porción del GRID contenida entre 4 GRID lines.

 

Puede contener N número de GRID cells.

Ilustraciones: http://gridbyexample.com/what/

CSS GRID Lo que debes saber

5- Activar CSS GRID

Ya no es necesario: A día de hoy, la mayoría de navegadores modernos soporta CSS GRID de forma nativa. 

Fuente: Can I Use.

CSS GRID Lo que debes saber

Demo 1

Vamos a realizar una primera práctica con CSS GRID para utilizar algunas de sus características esenciales:

Código disponible en GitHub.

  • La unidad fr.
  • Declarar y definir un GRID.
  • Especificar GRID tracks como filas y columnas.
  • Alinear el GRID container.
  • Implicit GRID.

CSS GRID Lo que debes saber

Demo 1

Declarar y definir un GRID

Define el contenedor GRID. inline-grid también disponible.

/* Declarando un GRID container */
main {
    display: grid; 
}

Especificar GRID tracks como filas y columnas

grid-template-rows & columns define las filas y columnas del GRID container.

main {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 33% 33% 100px;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Unidad fr

Representa una fracción del espacio disponible en GRID container. Utilizar esta medida permite que GRID responda y se adapte a los cambios en el viewport.

main {
    ...
    grid-template-columns: 2fr 1fr 1fr;
}

Se puede utilizar en combinación con otras unidades para crear GRID tracks flexibles junto con GRID tracks fijos.

main {
    ...
    grid-template-columns: 2fr 1fr 300px;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Especificar GRID tracks como filas y columnas

Si tenemos muchos GRID tracks para definir como filas o columnas, en lugar de repetirlos "a mano", podemos utilizar la función repeat.

 

repeat acepta dos argumentos. El primero es la cantidad de veces a repetir y el segundo es el patrón a repetir.

main {
    ...
    grid-template-columns: repeat(3, 100px 150px);
    /* O */
    grid-template-columns: 100px repeat(6, 1fr 150px);
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Especificar GRID tracks como filas y columnas

Con el layout CSS GRID llega la función minmax, que sirve para especificar un tamaño mínimo y máximo de un GRID track.

 

 

 

minmax es especialmente útil para definir los GRID tracks resultantes del implicit GRID (más sobre esto después).

main {
    ...
    grid-template-columns: minmax(100px, 300px) 1fr 1fr;
  	/*grid-template-columns: repeat(3, minmax(100px, 300px));*/
}
main {
    ...
    grid-auto-rows: minmax(auto, 1fr);
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Especificar GRID tracks como filas y columnas

¿No sería genial decirle al navegador que incluya tantos GRID tracks como quepan?. Eso es lo que se consigue con el valor auto-fill y auto-fit para la función repeat.

 

 

 

auto-fit destruye posibles GRID tracks vacíos, llenando el GRID container.

main {
    ...
    /* Tantos GRID tracks de 200px como quepan en el viewport */
    grid-template-columns: repeat(auto-fill, 200px);
}
main {
    ...
    /* Tantas columnas con ancho igual pero flexible como quepan en el viewport*/
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Especificar GRID tracks como filas y columnas

auto-fit y auto-fill son perfectos para crear layouts responsive.

main {
    /* grid-template-columns: repeat(12, minmax(100px, 1fr)); */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Código disponible en GitHub.

Auto-fill rellena la fila con tantas columnas como quepan. Estas pueden estar vacías aunque ocupen el espacio designado.

Auto-fit encaja las columnas existentes en el viewport, expandiéndolas si es necesario. Crea tantas como pueda (como auto-fill) pero colapsa las vacías.

CSS GRID Lo que debes saber

Demo 1

Alinear el GRID

Puedes especificar la alineación de los GRID items con respecto al contenedor:
 

Para el row axis:

 

 

 

Para el column axis:

main {
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}
main {
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Implicit GRID

grid-auto-rows & columms especifican el tamaño de un GRID track creado implícitamente.

 

 

 

Si un GRID item se posiciona en una fila o columna no creada de forma explícita (grid-template-rows/columns), se crean GRID tracks para contener ese item.
 

Estos GRID tracks creados automáticamente son llamados implicit GRID.

 

main {
    ...
    grid-auto-rows: minmax(auto, 1fr);
    grid-auto-columns: 1fr;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Implicit GRID

grid-auto-flow controla el funcionamiento del auto-placement algorithm de CSS GRID. 

Las dos opciones más utilizadas son row (por defecto) y column. 

main {
    ...
    grid-auto-flow: column;
}

El valor dense se utiliza cuando queremos que GRID "llene los huecos" con GRID items en base a su tamaño, aún a costa de alterar el orden normal (más de esto luego).

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 1

Implicit GRID

El valor por defecto de auto-flow es row, es decir, añadir items en la fila hasta que no haya más espacio. En tal caso, se crea una nueva fila (explícita o implícita, si no se ha declarado).

main { 
  grid-template-columns: repeat(6, 100px);
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: row | column; 
}

Podemos cambiar a column. En tal caso los elementos se irán añadiendo columna tras columna, añadiendo nuevas si es necesario.

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

Ahora que ya conocemos lo más básico de CSS GRID, podemos seguir profundizando en otras características. 

Para ello vamos a "emular" un layout basado en columnas para aprender:

  • Auto GRID.
  • Emplazamiento en base a número de línea.
  • Márgenes (gap) en GRID.
  • Alinear los GRID items.
  • CSS GRID y media queries.

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

Auto GRID

Si no declaramos una posición de los elementos en el GRID, este utiliza su Grid Auto-placement Algorithm para elegir el tamaño y posición de cada GRID item.

Puedes  elegir la dirección de ese Auto GRID con la propiedad grid-auto-flow que ya hemos visto.

Es posible cambiar el orden de los elementos auto-incorporados con la propiedad order (como FlexBox).

main {
    ...
    grid-auto-flow: row;
}
section:nth-child(3) {
    order: -1;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

Emplazamiento en base a número de línea

Un GRID siempre tiene líneas horizontales y verticales que lo definen. Estas líneas están numeradas y comienzan desde el nº 1.

La línea vertical nº 1 está  a la izquierda, mientras que la horizontal está arriba. En ambas direcciones, la línea -1 representa siempre la última línea.

main {
    ...
    /* 
        GRID con 4 líneas verticales
        y 5 líneas horizontales
    */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

Emplazamiento en base a número de línea

Teniendo en cuenta esas GRID lines, es posible definir dónde comienza y termina un GRID item con grid-row/column-start y grid-row/column-end.

main {
    ...
    /* 
        GRID con 4 líneas verticales
        y 5 líneas horizontales
    */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

header {
    grid-column-start: 1;
    grid-column-end: -1; /* Ancho completo */ 
    grid-row-start: 1;
    grid-row-end: 2;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

Márgenes (gap) en el GRID

No existe margen o separación entre los GRID rows y GRID columns, a no ser que se defina.

Para ello tenemos la propiedad grid-gap, que es un método atajo para definir grid-row/column-gap, es decir la separación entre filas y columnas, respectivamente.

main {
    ...
    /* grid-gap: 20px; 20px de separación entre filas y columnas */
    grid-column-gap: 20px;
    grid-row-gap: 30px;
}

Si se necesita más control sobre el margen, hay que declarar columnas y filas extra que hagan de él.

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

Alinear todos los GRID items

Podemos alinear todos los GRID items en un GRID track en base al row axis con la propiedad justify-items.

 

 

 

En el caso de column axis, disponemos de la propiedad align-items, con las mismas opciones.

main {
    justify-items: start | end | center | stretch;
}
main {
    align-items: start | end | center | stretch;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

Alinear GRID items específicos

Podemos alinear un GRID item en particular en el row axis con la propiedad justify-self.

 

 

 

En el caso de column axis, disponemos de la propiedad align-self, con las mismas opciones.

section {
    justify-self: start | end | center | stretch;
}
section {
    align-self: start | end | center | stretch;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 2

CSS GRID y media queries

Gracias a las media queries podemos establecer nuevas posiciones para los elementos GRID de forma sencilla.

main {
    ...
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

@media (max-width: 768px) {
    /* Intercambiar header y footer */
    header {
        grid-row-start: 4;
        grid-row-end: 5;
    }

    footer {
        grid-row-start: 1;
        grid-row-end: 2;
    }
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 3

En esta demo aprenderemos a trabajar de forma más eficiente posicionando elementos en CSS GRID, además de descubrir nuevas características.

En esta ocasión vamos a crear el layout más clásico posible: Header, Sidebar x2, Main content y Footer.

Aprenderemos:

  • Atajo grid.
  • Atajo grid-row/column.
  • GRID Named lines.
  • auto keyword.
  • GRID spanning.
  • GRID Named areas.

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 3

Atajo grid

Uno de las primeras propiedades atajo de CSS GRID permite especificar las filas y las columnas en una única declaración. Se trata de grid.

Primero, se definen las filas y luego las columnas, separando ambas declaraciones con un /.

main {
    ...
    /*
    grid-template-rows: .3fr 1fr .2fr;
grid-template-columns:.5fr 1fr 1fr .5fr;
  	*/
    grid: .3fr 1fr .2fr / .5fr  1fr 1fr .5fr ;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 3

Atajo grid-row/column

De la misma forma, en cada GRID item se puede especificar las números de líneas iniciales y finales (tanto de filas como columnas) en una única declaración y utilizando / a través de grid-row y grid-column,respectivamente:

section {
    /*
    grid-row-start: 3;
    grid-row-end: 4
    */
    grid-row: 3 / 4;
}

section {
    /*
    grid-column-start: 1;
    grid-column-end: -1;
    */
    grid-column: 1 / -1;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 3

CSS GRID named lines positioning

Hemos visto que llevar la cuenta del número de líneas puede llegar a ser confuso. Una primera medida para evitarlo es nombrar las líneas (todas o algunas, usando []) en la propia definición grid para luego hacer referencia a ellas en los GRID items. Puedes mezclar con nº.

main {
    /* Grid de 3 filas y 3 columnas */
    grid: [inicio] .3fr [inicio-contenido] 1fr [fin-contenido] .2fr [fin]
    / [inicio] .5fr [inicio-contenido ] 1fr [fin-contenido] .5fr [fin];
}
header {
    grid-column: inicio / fin;
    grid-row: inicio / inicio-contenido;
}

Nombrar las líneas GRID puede hacer que todo el layout sea agnóstico a la cantidad, posición y tamaño de filas y columnas.

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 3

CSS GRID y auto

La palabra clave auto es el valor por defecto de muchas propiedades de CSS GRID (por ejemplo grid-column-start/end). Al utilizarla al declarar el tamaño de filas o columnas, estas tomarán el espacio que marque su propio contenido.

main {
    /* Grid de 3 filas y 3 columnas */
    grid: auto 1fr auto / 100px auto 100px
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 3

CSS GRID item spanning

Por defecto y si no especificamos una línea final, los GRID items ocupan 1 GRID row o column track. Podemos hacer que ocupen varios (además de utilizando números o nombres de línea) con la palabra clave span y un número de GRID tracks extra que ocupar.

section {
    grid-column: 1 / span 2; /* El GRID item ocupa 2 GRID tracks */
    grid-row: inicio-contenido / fin-contenido;
}

Código disponible en GitHub.

CSS GRID Lo que debes saber

CSS GRID named areas positioning

Un paso más para facilitar el posicionamiento de los GRID items en el GRID consiste en asignar un nombre a cada área que contendrá, con la propiedad grid-area.

header { 
    grid-area: header; 
}

.sidebar { 
    grid-area: sidebar; 
}

.main { 
    grid-area: main; 
}

footer { 
    grid-area: footer; 
}

Código disponible en GitHub.

Demo 3

CSS GRID Lo que debes saber

CSS GRID named areas positioning

Luego se pueden referenciar a la hora de construir el GRID, con la propiedad grid-template-areas.

main {
    grid: auto 1fr auto / repeat(3, 1fr);
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

Cada nombre de área se repite para llenar cada GRID track. Un punto (.) dejará un GRID track sin llenar.

main {
    ...
    grid-template-areas: 
        "header header header"
        ". main main"
        "footer footer footer";
}

Al utilizar named GRID areas, estamos creando automáticamente named GRID lines. Para acceder a ellas hay que utilizar los nombres de area y añadir los sufijos -start y/o -end.

Código disponible en GitHub.

Demo 3

CSS GRID Lo que debes saber

Demo 4

En la demo final vamos a ver cómo funciona el algoritmo de colocación de CSS GRID, llamado auto-placement.

Más concretamente, veremos qué ocurre si no hemos definido específicamente la ubicación de un elemento y este no cabe en el siguiente GRID track disponible.

Aprenderemos:

  • GRID auto-placement.
  • GRID packing modes.

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 4

CSS GRID auto-placement

Como ya hemos visto, si no especificamos una posición para los GRID items, GRID usa un algoritmo para que los elementos fluyan en la rejilla, llenando los GRID tracks (filas y columnas).

main {
    grid: auto 1fr auto / repeat(3, 1fr);
    grid-auto-flow: column;
}

Podemos alterar la dirección de ese flujo, con la propiedad grid-auto-flow  y sus valores row (por defecto) y column.

Código disponible en GitHub.

CSS GRID Lo que debes saber

Demo 4

CSS GRID packing modes

Pero, ¿qué ocurre si el siguiente GRID item no cabe el GRID track?. GRID aún así comenzará a buscar en la siguiente fila para acomodar el elemento, dejando huecos libres.

main {
    ...
    grid-auto-flow: dense;
}

Podemos modificar ese packing mode para que, a costa de alterar el orden natural del DOM, GRID llene esos huecos disponibles, a través del valor dense para la propiedad grid-auto-flow.

Código disponible en GitHub.

CSS GRID Lo que debes saber

6- Recursos CSS GRID

Aunque cada vez hay más recursos disponibles para aprender a dominar CSS GRID, en mi opinión los mejores (y que yo mismo he consumido) son:

 

CSS GRID: Lo que debes saber

By Juan Andrés Núñez

Made with Slides.com

CSS GRID: Lo que debes saber

  • 3,761

More from Juan Andrés Núñez