Css grid layout

Editar el estilo de texto del patrón

CSS Grid LayoutNoviembre de 2016

Editar el estilo de texto del patrón

Luis Calvo DíazResponsable de Desarrollo Front-end en Paradigma Digital@luiscalvodiaz

Índice

1. Introducción

2. Grid layout

3. Referencias

Editar el estilo de texto del patrón

CSS Grid Layout

01. Introducción

Editar el estilo de texto del patrón

CSS Grid Layout

Un ”grid” es un conjunto de líneas horizontales y verticales que forman un patrón de filas y columnas en el cual podemos situar elementos de

texto y/o gráficos

01. Introducción

¿Qué es un grid?

Editar el estilo de texto del patrón

CSS Grid Layout

01. Introducción

Partes de un grid

Editar el estilo de texto del patrón

CSS Grid Layout

- Tablas / frames (pleistoceno)- Floats- Inline-block- Display: table (regreso al pasado)- Posicionamiento absoluto/relativo- Paladas de frameworks

Desde septiembre de 2016 CSS Grid Layout es Candidate Recommendation

01 Introducción

Implementando grids

Editar el estilo de texto del patrón

02. Grid Layout

Editar el estilo de texto del patrón

CSS Grid Layout

02 Grid Layout

Implementación en navegadores (la pesadilla de siempre)

Acceder a chrome://flags

Habilitar “Funciones experimentales de Web Platform” o “Enable experimental Web Platform Features”

Editar el estilo de texto del patrón

CSS Grid Layout

• display-template-rows define el número de filas y su tamaño

• display-auto-rowsdefine el tamaño por defecto de las filas

• display-template-columns define el número de columnas y su tamaño

• display-row-gap define el tamaño del “carril” entre filas

• display-column-gap define el tamaño del “carril” entre columnas

• Nuevas unidades de medida: fr -> fracción del espacio disponible minmax()

• autofill / autofitdefine el número de filas y su tamaño

02 Grid Layout

Creando un grid layout

display: grid -> la madre del cordero

Editar el estilo de texto del patrón

CSS Grid Layout

• grid-column-startDetermina en qué columna comienza el grid-item

• grid-column-endDetermina en qué columna finaliza el grid-item

• grid-row-startDetermina en qué fila comienza el grid-item

• grid-row-endDetermina en qué fila finaliza el grid-item

02. Grid Layout

Orden y posición

Editar el estilo de texto del patrón

CSS Grid Layout

- CSS Grid layout https://www.w3.org/TR/css-grid-1/

- Box Alignment https://drafts.csswg.org/css-align/

- Grid by Example: http://gridbyexample.com/

- CSS Tricks : https://css-tricks.com/snippets/css/complete-guide-grid/

03. Referencias

Links útiles

Editar el estilo de texto del patrón

CSS Grid Layout

¡Muchas gracias!

En Paradigma buscamos talento:[email protected]