Taller de CSS Grid

¡Ya era hora!

El plan

1. De dónde viene

2. Diferencias con Flex

3. Sintaxis

4. Ejercicios prácticos

 

¿Sabíais que es una idea original de Microsoft?

CSS Grid

Fue una idea original de Phil Cupp (Microsoft)

 

En 2012 comenzó a desarrollarse en la W3C

 

Hasta 2017 no se implementó en todos los navegadores modernos

Fuente original

Algunos mitos

Con Flexbox se puede hacer lo mismo.

 

No lo soportan todos los navegadores.

 

Es difícil de aprender

Fuente original

Vs

Fuente original

Conceptos previos

Grid explícito


.grid {
  display: grid; 

  /*Grid explícito*/
  grid-template-columns: 1fr 1fr 1fr; /* Declaramos columnas */
  grid-template-rows: 100px 50px 100px; /* Declaramos filas */

  grid-column-gap: 1rem; /* Espacio entre columnas */
  grid-row-gap: 14px; /* Espacio entre filas */
}

Grid implícito


.grid {
  display: grid; 

  /*Grid explícito*/
  grid-template-columns: 1fr 1fr 1fr; /* Declaramos columnas */
  grid-template-rows: 100px 50px 100px; /* Declaramos filas */

  /*Grid implícito*/
  grid-auto-columns: 1fr; /* En el caso de tener más columnas */
  grid-auto-rows: 1fr; /* En el caso de tener más filas */

  grid-column-gap: 1rem; /* Espacio entre columnas */
  grid-row-gap: 14px; /* Espacio entre filas */
}

Funciones de ayuda


.grid {
  display: grid; 

  /*grid-template-columns: 500px 1fr 1fr 1fr; Ejemplo anterior*/ 

  grid-template-columns: 500px repeat(3, 1fr); 
}
repeat()

Funciones de ayuda


.grid {
  display: grid; 

  grid-template-columns: minmax(300px, 500px) repeat(3, 1fr);
}
minmax()

.grid {
  display: grid; 

  grid-template-columns: repeat(3, minmax(300px, 500px));
}

Funciones de ayuda


.grid {
  display: grid; 

  grid-template-columns: repeat(auto-fit, 15rem);
}
autofit

.grid {
  display: grid; 

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

En el caso de que los elementos no quepan, crea filas o columnas adicionales

Funciones de ayuda


.grid {
  display: grid; 

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
autofill

Genera huecos vacíos para simular los espacios que faltan, autofit estira los elementos al máximo del contenedor

 

 

 

 

Posicionamiento


/*CSS para el contenedor*/

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/*CSS para el item-a */

.item-a{
/*Posicionamiento respecto a la columna*/
/*grid-column-start:2;
 grid-column-end:4;*/
 grid-column: 2/4; /*Forma corta*/

/*Posicionamiento respecto a la fila*/
/*grid-row-start:2;
 grid-row-end:4;*/
 grid-row: 2/4; /*Forma corta*/
}

Con CSS Grid es posible posicionar elementos mediante coordenadas, para ello contaremos las líneas del grid

Posicionamiento


/*CSS para el contenedor*/

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/*CSS para el item-a */

.item-a{
 /*Posicionamiento respecto a la columna*/
 /*grid-column: 2/4; Forma corta */
 grid-column: 2/span 2; /*Expandiendo el elemento*/
}

También es posible hacer crecer los elementos para que ocupen diferentes columnas mediante la palabra reservada span

Podemos expandir desde la posición inicial o determinar cuántas columnas se expande respecto a la posición determinada

Posicionamiento


/*CSS para el item-a */

.item-a{
 grid-column: span 4;
 grid-row: span 4;
}

.item-a{
 grid-column: span 4;
 grid-row: 2 / span 4;
}

.item-a{
 grid-area: 2 / 1 / span 4 / span 4;
}

grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end

¡Practiquemos!

Crea un grid de 12 columnas

¡Practiquemos!

Crea un grid de Thomas Robin

Nombrar líneas


.grid{
 grid-template-columns: [start] minmax(200px, 20%) [main] 1fr [end];
 grid-template-rows: [header] auto [main] 500px  [footer] auto [end];
}

.header{
 grid-column: start / end;
}

.footer{
 grid-column: start / end;
}

¿Cansado de contar lineas? Puedes ponerles nombres

Dibuja tu layout en CSS Grid


.header{
 grid-area: header; /* Definimos el nombre del area */
}
.sidebar{
 grid-area: sidebar;
}
.main{
 grid-area: main;
}
.footer{
 grid-area: footer;
}

.grid{
 display:grid;
 grid-gap: .5rem;
 grid-template-colums: repeat(3, 1fr); /* Definimos 3 columnas */
 grid-template-areas: 
  "header header header"
  "sidebar main main"
  "footer footer footer"; /* Definimos cuanto ocupan las áreas */
}

Es posible representar un hueco en blanco con un punto

Si, has leído bien, puedes dibujarlo mediante nombres de areas

¡Un ejemplo sencillo! 

Holy Grail Layout

Enlaces y herramientas

Chuleta de propiedades

Documentación
Juego para practicar

Q&A

¡Gracias!

Taller Grid

By Oscar Bustos

Made with Slides.com

Taller Grid

Taller de grid

  • 48

More from Oscar Bustos