CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns:...

36
CSS GRID Una aventura que no te puedes perder Óscar Abad Folgueira

Transcript of CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns:...

Page 1: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

CSS GRIDUna aventura que no te puedes perder

Óscar Abad Folgueira

Page 2: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Óscar Abad Folgueira@oabadfol

Desarrollador WordPress en Oh! Yeah DevFreelance dinapyme.comBlog: oscarabadfolgueira.com

https://ohyeahdev.es/
https://www.dinapyme.com
http://oscarabadfolgueira.com
Page 3: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

¿Qué es CSS GRID?

Page 4: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Modelo de maquetación CSS en base a una rejilla.

Es un estándar.

No son necesarias librerías.

Page 5: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

SOPORTE DE NAVEGADORES

Page 6: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Creación de un contenedor Grid

.contenedor{display: grid;

}

.contenedor{display: inline-grid;

}

Page 7: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px;

}

Declarar columnas: grid-template-columns

Page 8: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px

100px 100px 100px 100px 100px 100px;}

Declarar columnas: grid-template-columns

Page 9: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px

100px 100px;}

Declarar columnas: grid-template-columns

Page 10: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px; grid-template-rows: 100px 100px;}

Declarar filas: grid-template-rows

Page 11: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px; grid-template-rows: auto auto;}

Declarar filas: grid-template-rows

Page 12: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto auto auto;}

Establecer filas y columnas: Tamaño variable

Page 13: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto;}

Establecer filas y columnas: Tamaño variable

Page 14: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 1fr auto;}

Establecer filas y columnas: Tamaño variable

Page 15: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: 200px 20% minmax(10%, 2fr) 200px;}

Tamaño máximo y mínimo: minmax

Page 16: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: 200px max-content minmax(10%, 2fr) max-content;}

Ajustar tamaño a contenido: max-content

Page 17: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: repeat(4, 20%);}

Repetición de elementos grid: repeat()

Page 18: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: repeat(8, 1fr);}

Repetición de elementos grid: repeat()

Page 19: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: repeat(3, 100px 1fr 3rem);}

Repetición de elementos grid: repeat()

Page 20: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-columns: auto repeat(2, 1fr 80px) 100px 2rem repeat(2, max-content);}

Repetición de elementos grid: repeat()

Page 21: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

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

Definición de cuadrículas

Page 22: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Terminología

Grid line Grid cell

Row

ColumnGrid Area Grid Track

Grid Item

Page 23: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.contenedor{ display: grid; grid-template-areas:

“izquierda centro derecha”;}.izquierda{ grid-area: izquierda; background-color: #005387;}.centro{ grid-area: centro; background-color: #8cb811;}.derecha{ grid-area: derecha; background-color: #fdb813;}

Nombrando las celdas: grid-template-areas

<div class="contenedor"><div class="izquierda">Izquierda</div><div class="centro">Centro</div><div class="derecha">Derecha</div>

</div>

Page 24: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

.container-grid{ display: grid; grid-template-areas:

"cabecera cabecera cabecera cabecera""izquierda contenido contenido derecha""pie pie pie pie";

}.cabecera{ grid-area: cabecera;}.izquierda{ grid-area: izquierda;}.contenido{ grid-area: contenido;}.derecha{ grid-area: derecha;}.pie{ grid-area: pie;}

grid-template-areas

<div class="container"><div class="item cabecera">Header</div><div class="item izquierda">Izquierda</div><div class="item contenido">Contenido</div><div class="item derecha">Derecha</div><div class="item pie">Footer</div>

</div>

Page 25: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Grid Gap - Espaciado .container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 50px); /* grid-column-gap: 20px; */ /* grid-row-gap: 15px; */ /* column-gap: 20px; row-gap: 15px; */ grid-gap: 15px 20px;}

Page 26: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Alineación horizontal - justify-items

Alineación de lo elementos del grid

justify-items: start | center | end | scretch

Page 27: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Alineación vertical - align-items

align-items: start | center | end | scretch

Page 28: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Alineación horizontal del contenedor - justify-content

justify-content: start | center | end | scretch | space-around | space-between | space-evenly

Page 29: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

CSS Grid

PROPIEDADE DES LOS HIJOS/AS

Page 30: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Definición de los elementos

grid-column-startgrid-column-endgrid-row-startgrid-row-end

.item { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto;}

Page 31: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

v

Definición de los elementosgrid-column-startgrid-column-endgrid-row-startgrid-row-end

.elemento{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; background-color: purple;}

Page 32: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

v

Definición de los elementos

grid-columngrid-row

.elemento{ grid-column: 2 / 4; grid-row: 1 / 3; background-color: purple;}

Page 33: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Definición de los elementos - Ejemplo

<div class="container-grid1"><div class="elemento1 item">Elemento 1</div><div class="elemento2 item">Elemento 2</div><div class="elemento3 item">Elemento 3</div><div class="elemento4 item">Elemento 4</div><div class="elemento5 item">Elemento 5</div>

</div>.container-grid1{ display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 80px); border: 1px solid black;}.elemento1{ grid-column: 2 / 4; grid-row: 1 / 3; background-color: purple;}.elemento2{ grid-column: 5 / 6; grid-row: 1 / 3; background-color: gray;}

.elemento3{ grid-column: 3 / 6; grid-row: 4 / 6; background-color: orange;}.elemento4{ grid-column: 1 / 3; grid-row: 3 / 5; background-color: blue;}.elemento5{ grid-column: 1 / 5; grid-row: 2 / 6; background-color: black; z-index: -1;}

Page 34: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Definición de los elementos - Ejemplo1 2 3 4 5 6

1

2

3

4

5

6

Page 35: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

Recursos

A Complete guide to grid: https://css-tricks.com/snippets/css/complete-guide-grid/

Ejemplos presentación en Codepen: https://codepen.io/collection/XKEGLE

CSS Grid Layout - Mozilla: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout

Grid by example: https://gridbyexample.com/

CSS Grid Cheatsheet: http://grid.malven.co/

https://css-tricks.com/snippets/css/complete-guide-grid/
https://codepen.io/collection/XKEGLE
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout
https://gridbyexample.com/
http://grid.malven.co/
Page 36: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:

CSS GRID!!!! Oh Yeah!!


Delgaz Grid - Acces Delgaz Grid

Delgaz Grid - Acces Delgaz Grid

revista grid

revista grid

Oracle Grid

Oracle Grid

Smart Grid Informe

Smart Grid Informe

Grid Computing

Grid Computing

Grid’5000 Grid eXplorer - CentraleSupelec · • GridSim • Australian competitor of SimGrid ... Grid'5000 and Grid eXplorer 8 GridGridA New Generation of Research Tools’5000’5000

Grid’5000 Grid eXplorer - CentraleSupelec · • GridSim • Australian competitor of SimGrid ... Grid'5000 and Grid eXplorer 8 GridGridA New Generation of Research Tools’5000’5000

EasyPark Grid

EasyPark Grid

UNEP GEF PIR FY 06 · Web viewPIR FY 2016 template PIR FY 2016 template PIR FY 2016 template PIR FY 2016 template PIR FY 2016 template PIR FY 2016 template 33 33 33 5 5 5 Nanjing

UNEP GEF PIR FY 06 · Web viewPIR FY 2016 template PIR FY 2016 template PIR FY 2016 template PIR FY 2016 template PIR FY 2016 template PIR FY 2016 template 33 33 33 5 5 5 Nanjing

InformeFinal GRID

InformeFinal GRID

Computación Grid

Computación Grid

NOVUMDEC METAL GRID MODULAR - riho.com.mxriho.com.mx/catálogos_novumdec_metal/GRIDMODULARweb.pdf · 1 NOVUMDEC METAL GRID MODULAR MODULOS ESTÁNDAR DE GRID MODULAR PARA BASTIDOR

NOVUMDEC METAL GRID MODULAR - riho.com.mxriho.com.mx/catálogos_novumdec_metal/GRIDMODULARweb.pdf · 1 NOVUMDEC METAL GRID MODULAR MODULOS ESTÁNDAR DE GRID MODULAR PARA BASTIDOR

Tesis de grid,

Tesis de grid,

PLC SMART GRID

PLC SMART GRID

Www.trackmaker · • Soporta el uso de varios sistemas de coordenadas cartesianas, incluyendo UTM, British National Grid, Irish National Grid, Swiss Grid, Swedish Grid, New Zealand

Www.trackmaker · • Soporta el uso de varios sistemas de coordenadas cartesianas, incluyendo UTM, British National Grid, Irish National Grid, Swiss Grid, Swedish Grid, New Zealand

PERANCANGAN SISTEM SMART GRID DENGAN METODE KENDALI …elektrounjani.com/images/berkas/template-proposal-ta-s1... · 2018. 9. 14. · PERANCANGAN SISTEM SMART GRID DENGAN METODE KENDALI

PERANCANGAN SISTEM SMART GRID DENGAN METODE KENDALI …elektrounjani.com/images/berkas/template-proposal-ta-s1... · 2018. 9. 14. · PERANCANGAN SISTEM SMART GRID DENGAN METODE KENDALI

Grid Fonts

Grid Fonts

Alv Grid - Poo

Alv Grid - Poo

Smart Grid

Smart Grid

GRiD Arquitectos

GRiD Arquitectos

THE GRID SURF

THE GRID SURF