Grid Layout: Nueva forma de maquetar e introducir información en la web

GRID LAYOUT Nueva forma de maquetar y colocar información en
la web Imanol Terán Maruri - @itermar

Imanol Terán Maruri ‣ Diseñador y desarrollador frontend ‣ Fundador
de widdiapps.com ‣ Puedes encontrarme en: ‣ http://imanolteran.com ‣ @itermar ‣ [email protected] QUIÉN SOY

PROGRAMA ‣ Introducción ‣ Diferencias con Flexbox ‣ Conceptos clave
‣ Grid Layout Responsive ‣ Propiedades y módulos ‣ @supports ‣ Práctica

INTRODUCCIÓN ¿Cómo maquetamos nuestras web?

EVOLUCIÓN Table Box Model Grid Systems Flexbox Grid Layout

Table ‣ Surgió en 1995 con la especiﬁcación HTML 3.0
‣ Se “hizo fuerte” con la versión HTML 3.2 ‣ El “tag” <table> creado para crear layouts, además de mostrar datos en tablas

Table - Características ‣ <table border=0> ‣ <body bottomMargin=0 leftMargin=0>
‣ <td valign=top> ‣ <table cellspacing=10 cellpadding=10> ‣ <td colspan=3 rowspan=1>

Table - Problemas ‣ Estilo, contenido y marcado juntos ‣
Accesibilidad ‣ Código poco legible

BOX MODEL

BOX MODEL ‣ Surgió en 1996 con CSS 1 y
HTML 3.2 ‣ Empezamos a hablar del concepto CSS: separar estilo y marcado ‣ Aparecen elementos de bloque: <div>, <h1>, <p>…

BOX MODEL - EVOLUCIÓN I ‣ width, height ‣ display,
ﬂoat ‣ margin, padding y border

BOX MODEL - EVOLUCIÓN II ‣ position ‣ top, bottom,
left, right ‣ max-width, min-width, max-height, min-height

BOX MODEL - FIN DE LAS TABLAS ‣ <table> :
para mostrar datos en tablas ‣ box model : layouts con CSS

BOX MODEL - EVOLUCIÓN III ‣ box-sizing

BOX MODEL - PROBLEMAS ‣ Alinear objetos en vertical ‣
Posicionar unas cajas junto a otras (ﬂoat, inline o inline-block) ‣ Clearﬁx, clear:both ‣ Altura automática de las cajas ‣ …y unos cuantos más

GRID SYSTEMS

GRID SYSTEMS ‣ Comienzan en 2007 con Blueprint ‣ Nacen
para solucionar problemas de layout y crear sistema de columnas estándar ‣ 12, 16 o 24 columnas ‣ Abstracción del modelo de cajas ‣ Éxito en 2009, con 960.gs

ANTES DE GRID 1 2 3

DESPUÉS DE GRID <div class=“container clearfix”> <div class=“span-8”>1</div> <div class=“span-8”>2</div>
<div class=“span-8 last”>3</div> </div> 1 2 3

TIPOS DE GRID ‣ Columna ‣ Fluída / Fija ‣
Semántica / No-semántica ‣ Responsive ‣ … y más

EJEMPLOS ‣ Blueprint: http://www.blueprintcss.org ‣ 960.gs: http://960.gs ‣ Bootstrap: http://getbootstrap.com
‣ Foundation: http://foundation.zurb.com

FLEXBOX

FLEXBOX ‣ 19 años sin especiﬁcación CSS concreta para trabajar
con layout ‣ W3C empieza con ello en 2009 ‣ Ha habido varias sintaxis durante el proceso

FLEXBOX - ESTADO ACTUAL ‣ Soporte a navegadores está mejorando
‣ Muchos frameworks lo están incluyendo ‣ Pensado para organizar elementos en 1 dimensión

FLEXBOX Consiste, principalmente, en proporcionar al contenedor la habilidad para
cambiar la anchura y altura de los elementos que contiene, con el ﬁn de rellenar de la forma más eﬁciente posible el espacio en blanco y prevenir los desbordes

GRID LAYOUT

GRID LAYOUT ‣ Especiﬁcación W3C para trazar el layout de
nuestras páginas web ‣ Primer draft fue en Abril de 2011: propuesto por Microsoft ‣ IE10, IE11: tienen soporte “a medias”. Especiﬁcación antigua

GRID LAYOUT ‣ Sistema de layout para trabajar en 2
dimensiones ‣ Primer módulo creado especíﬁcamente para solucionar problemas de layout al crear páginas web ‣ Revoluciona la forma en que diseñamos layouts basados en rejilla ‣ Siempre habíamos utilizado CSS. Poco eﬁciente y faltaban cosas como centrado vertical…etc.

GRID LAYOUT ‣ Evitamos el uso de “clear”, overﬂows…etc. ‣
No es posible que suceda, puesto que “cada elemento tiene su sitio” ‣ Flexbox ayuda, pero solo está pensado para 1 dimensión ‣ Grid Layout y Flexbox pueden trabajar juntos

GRID LAYOUT ‣ Fase experimental, hay que activar ciertos flags
en el navegador ‣ Chrome: ‣ chrome://flags ‣ Activar “Experimental Web Platform Features” ‣ Firefox: ‣ about:config ‣ Activar “layout.css.grid.enabled”

CONCEPTOS CLAVE y compatibilidad con Navegadores

.container { display: grid; } GRID CONTAINER Elemento “padre” de
todo el resto de elementos

GRID LINE Gracias a ellas creamos la rejilla. Pueden ser
horizontales o verticales y podemos acceder a ellas por número o nombre.

GRID TRACK Espacio entre dos grid lines. Puede ser horizontal
o vertical.

GRID CELL Unidad mínima dentro de la rejilla. Está formada
por la intersección de dos column lines y dos row lines

GRID AREA Espacio delimitado por 4 grid lines: puede contener
un número cualquiera de celdas

GRID GUTTERS De momento lo conseguimos con grid tracks de
menor grosor que actúan como “separadores” del contenido grid-column-gap grid-row-gap * No deﬁnitivas grid-gap ≈

PROPIEDADES y compatibilidad con Navegadores

¿QUÉ PODEMOS CONTROLAR CON GRID LAYOUT? ‣ Posición de secciones
dentro de nuestra página ‣ Modiﬁcar esas posiciones en responsive

<div class="container"> <div class="box header">header</div> <div class="box sidebar">sidebar</div> <div class="box
title">title</div> <div class="box article1">article1</div> <div class="box article2">article2</div> <div class="box article3">article3</div> <div class="box footer">footer</div> </div> EMPEZANDO CON GRID LAYOUT

SIN GRID LAYOUT

.container { display: grid; } EMPEZANDO CON GRID LAYOUT

CON GRID LAYOUT

PROPIEDADES GRID LAYOUT

PROPIEDADES GRID LAYOUT ‣ display ‣ grid-template-columns ‣ grid-template-rows ‣
grid-template-areas ‣ grid-template ‣ grid-column-gap ‣ grid-row-gap ‣ grid-gap ‣ justify-items ‣ align-items ‣ justify-content ‣ align-content ‣ grid-auto-columns ‣ grid-auto-rows ‣ grid-auto-ﬂow ‣ grid Contenedor

CONTENEDOR

display ‣ Mediante esta propiedad, indicamos que el elemento es
un contenedor de tipo grid ‣ Con esto, creamos nuestro nuevo contexto en el que podremos posicionar todos los elementos contenidos dentro de él.

‣ grid ‣ inline-grid ‣ subgrid display

grid-template-columns ‣ Establecemos las columnas de nuestra rejilla ‣ Lo
hacemos mediante una serie de valores separados ‣ Cada valor indica el tamaño de una columna ‣ Podemos nombrar las líneas verticales (más de un nombre) ‣ repeat()

‣ <track-size> ‣ fr: unidad de medida que nos permite
establecer el tamaño de nuestro track como proporcional al espacio libre disponible en nuestra rejilla. ‣ <line-name> grid-template-columns

grid-template-rows ‣ Establecemos las ﬁlas de nuestra rejilla ‣ Lo
hacemos mediante una serie de valores separados ‣ Cada valor indica el tamaño de una ﬁlas ‣ Podemos nombrar las líneas horizontales (más de un nombre) ‣ repeat()

grid-template-rows ‣ <track-size> ‣ fr: unidad de medida que nos
permite establecer el tamaño de nuestro track como proporcional al espacio libre disponible en nuestra rejilla. ‣ <line-name>

grid-template-areas ‣ Establecemos la rejilla haciendo referencia a los nombres
de las “grid areas” especiﬁcadas en la propiedad grid-area de los items contenidos

grid-template-areas ‣ <grid-area-name> ‣ “.”: celda vacía

grid-column-gap ‣ Sirve para deﬁnir el espacio entre columnas ‣
Solo creamos espacio entre columnas, nunca fuera de los limites de nuestro grid

grid-row-gap ‣ Sirve para deﬁnir el espacio entre ﬁlas ‣
Solo creamos espacio entre columnas, nunca fuera de los limites de nuestro grid

grid-gap ‣ Abreviatura para “grid-column-gap” y “grid-row-gap” ‣ Si establecemos
un único valor, aplicamos misma separación entre ﬁlas y columnas ‣ grid-gap = <grid-row-gap> <grid-column-gap>;

justify-items ‣ Alinea los items que contiene a lo largo
del eje horizontal (row) ‣ * Para aplicar a un item en concreto: justify-self

justify-items ‣ start: alinea todos los items a la izquierda
‣ end: alinea todos los items a la derecha ‣ center: centra todos los items en eje horizontal ‣ * stretch: hace que los elementos ocupen todo el ancho

align-items ‣ Alinea los items que contiene a lo largo
del eje vertical (column) ‣ * Para aplicar a un item en concreto: align-self

align-items ‣ start: alinea todos los items en la parte
superior ‣ end: alinea todos los items en la parte inferior ‣ center: centra todos los items en eje vertical ‣ * stretch: hace que los elementos ocupen todo el alto

justify-content ‣ Es de utilidad cuando nos encontramos con que
el tamaño de nuestro layout es menor que el del contenedor que tenemos deﬁnido como grid. ‣ En este caso, alineamos nuestro layout dentro de nuestro grid en el eje horizontal (column)

justify-content ‣ start ‣ end ‣ center ‣ stretch ‣
space-around ‣ space-between ‣ space-evenly

align-content ‣ Es de utilidad cuando nos encontramos con que
el tamaño de nuestro layout es menor que el del contenedor que tenemos deﬁnido como grid. ‣ En este caso, alineamos nuestro layout dentro de nuestro grid en el eje vertical (row)

align-content ‣ start ‣ end ‣ center ‣ stretch ‣
space-around ‣ space-between ‣ space-evenly

grid-auto-columns & grid-auto-row ‣ Sirven para determinar el tamaño de
los grid tracks implícitos ‣ Estos se crean cuando determinamos de forma explicita en una columna o fila que está fuera del rango del grid que hemos definido ‣ Lo que especificamos es el alto o el ancho de esos “huecos” no definidos hasta la posición de nuestro elemento

grid-auto-columns & grid-auto-row ‣ <track-size>: px, %, fr

grid-auto-ﬂow ‣ Cuando no especiﬁcamos de forma explícita la posición
de un elemento en la rejilla, entra en juego el algoritmo de “auto-placement” ‣ Mediante esta propiedad, indicamos cómo debe comportarse este algoritmo

grid-auto-ﬂow ‣ * row: le decimos al algoritmo que rellene
el contenido de forma vertical, añadiendo cuantas ﬁlas sean necesarias ‣ column: le decimos al algoritmo que rellene el contenido de forma horizontal, añadiendo cuantas columnas sean necesarias ‣ row dense / column dense: le decimos al algoritmo que intenta rellenar los huecos antes, en caso de que tengamos ítems más pequeños despues. Puede que nos aparezcan desordenados.

grid ‣ Esta propiedad aglutina a todas las demás vistas
anteriormente en una sola declaración ‣ grid-template-rows, grid-template-columns, grid- template-areas, grid-auto-rows, grid-auto-columns, grid-auto-ﬂow

grid .container { grid: none | <grid-template-rows> / <grid- template-columns>
| <grid-auto-flow> [<grid-auto- rows> [/ <grid-auto-columns>]]; }

grid-column-start / grid-column-end grid-row-start / grid-row-end ‣ Establece la posición
de un item en la rejilla, reﬁriéndonos a unas grid-lines especíﬁcas. ‣ Nuestro item empezara en grid-column-start / grid- row-start y terminará en grid-column-end / grid-row- end

grid-column-start / grid-column-end grid-row-start / grid-column-end ‣ <line>: puede ser
un valor o un nombre ‣ span <number>: el item se extiende a lo largo del numero especiﬁcado de grid tracks ‣ span <name>: el item se extiende hasta que encuentre la siguiente linea con el nombre indicado ‣ auto: indica auto-placement y span de 1 por defecto

grid-column ‣ Abreviatura para grid-column-start y grid-column- end

grid-column ‣ <start-line> / <end-line>: ambas aceptan mismo tipo de
valores que la forma extendida

grid-row ‣ Abreviatura para grid-row-start y grid-row-end

grid-row ‣ <start-line> / <end-line>: ambas aceptan mismo tipo de
valores que la forma extendida

grid-area ‣ Nos sirve para nombrar un item que vayamos
a colocar en nuestro layout, de forma que podamos utilizarlo dentro de la propiedad grid-template-areas del container

grid-area ‣ <name>: nombre que queremos darle a nuestro item

justify-self ‣ Alinea el contenido dentro un grid item a
lo largo del eje vertical (column)

justify-self ‣ start: alinea todos los items a la izquierda

align-self ‣ Alinea el contenido contenido dentro un grid item
a lo largo del eje horizontal (row)

align-self ‣ start: alinea todos los items a la izquierda

http://caniuse.com/#search=grid%20layout COMPATIBILIDAD CON NAVEGADORES

Marzo 2017

Internet Explorer 11

Edge 14 - 15

Firefox 52

Chrome 57

Safari 10.1

Opera 44

iOS Safari Opera Mini Android browser Android Chrome

iOS Safari Opera Mini Android browser Android Chrome ?

RESPONSIVE Grid Layout

RESPONSIVE GRID LAYOUT ‣ Mediante media queries, podemos recolocar los
elementos de nuestro layout, sin tocar para nada el HTML ‣ Modificar ancho de columnas o alto de filas ‣ Modificar nuestro grid-template-area

@supports

‣ Mediante la técnica de fallback, añadimos las reglas CSS
de grid layout. ‣ @supports consulta qué funcionalidades están disponibles ‣ Si nuestro navegador no lo soporta, tenemos debajo las reglas clásicas, soportadas por todos los browsers. @supports

@supports (display: grid) { /* Introducir CSS relativo a Grid
*/ } /* Aquí debajo reglas CSS usadas hasta ahora */ @supports

REFERENCIAS y Documentación

‣ https://www.w3.org/TR/css3-grid-layout/ ‣ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout ‣ https://abookapart.com/products/get-ready-for-css-grid-layout ‣ http://gridbyexample.com ‣ https://tympanus.net/codrops/css_reference/grid/
REFERENCIAS

GRACIAS Imanol Terán Maruri @itermar [email protected]

Grid Layout: Nueva forma de maquetar e introducir información en la web

Grid Layout: Nueva forma de maquetar e introducir información en la web

More Decks by Imanol Terán

Other Decks in Design

Featured

Transcript