17075215
Description
Mind Map by Salma Kalife, updated more than 1 year ago
|
Created by Salma Kalife
almost 6 years ago
|
|
Propiedades de Grid
- Grid Container
- display
- Define el elemento como un contenedor de grid y establece un
nuevo formato de contexto de grid para su contenido.
- valores
- grid
- display: grid;
- display: grid;
- inline-grid
- grid
- valores
- Define el elemento como un contenedor de grid y establece un
nuevo formato de contexto de grid para su contenido.
- grid-template-columns
- grid-template-rows
- Define las columnas y listas del grid con unas listas
de valores separados-por-espacios.
- valores
- <track-size>
- grid-template-columns: 30% 50%;
- grid-template-rows: 45vh 55vh;
- grid-template-rows: 45vh 55vh;
- grid-template-columns: 30% 50%;
- <line-name>
- <track-size>
- valores
- Define las columnas y listas del grid con unas listas
de valores separados-por-espacios.
- grid-template-rows
- grid-template-areas
- Define una grid template usando de referencia los nombres de
las grid areas las cuales son especificadas con la propiedad de
grid-area.
- valores
- <grid-area-name>
- header {grid-area: encabezado;}
section {grid-area: contenedor;}
footer {grid-area: piepagina;}
body>div {grid-template-areas:
"encabezado encabezado
encabezado" "contenedor contenedor
contenedor" "piepagina piepagina
piepagina";
- header {grid-area: encabezado;}
section {grid-area: contenedor;}
footer {grid-area: piepagina;}
body>div {grid-template-areas:
"encabezado encabezado
encabezado" "contenedor contenedor
contenedor" "piepagina piepagina
piepagina";
- none
- <grid-area-name>
- valores
- Define una grid template usando de referencia los nombres de
las grid areas las cuales son especificadas con la propiedad de
grid-area.
- grid-gap
- Especifica el espacio entre las columnas/las filas.
- valores
- <grid-row-gap> <grid-column-gap>
- grid-gap: 10px
20px;
- grid-gap: 10px
20px;
- <grid-row-gap> <grid-column-gap>
- valores
- Especifica el espacio entre las columnas/las filas.
- justify-items
- Alinea el contenido horizontalmente.
- valores
- start
- end
- center
- stretch
- justify-items: stretch;
- justify-items: stretch;
- start
- valores
- Alinea el contenido horizontalmente.
- align-items
- Alinear contenido verticalmente.
- valores
- start
- align-items: start;
- align-items: start;
- center
- end
- stretch
- start
- valores
- Alinear contenido verticalmente.
- justify-content
- Alinear todo el grid horizontalmente.
- valores
- start
- end
- stretch
- center
- space-around
- justify-content: space-around;
- justify-content: space-around;
- space-between
- space-evenly
- start
- valores
- Alinear todo el grid horizontalmente.
- align-content
- Alinear todo el grid verticalmente.
- valores
- start
- center
- end
- stretch
- space-around
- space-between
- align-content: space-between;
- align-content: space-between;
- space-evenly
- start
- valores
- Alinear todo el grid verticalmente.
- display
- Introducción
- CSS Grid Layout es un sistema de layout bidimensional basado en el grid que se dedica a
cambiar completamente la manera en la que diseñamos interfaces de usuario basadas en grid.
- CSS Grid Layout es un sistema de layout bidimensional basado en el grid que se dedica a
cambiar completamente la manera en la que diseñamos interfaces de usuario basadas en grid.
- Basic and Browser Support
- Para poder comenzar tienes que definir un elemento de container
con display: grid; definir los tamaños de las columnas y las filas con
grid-template-columns y grid-template-rows, y luego poner a sus
elementos hijos en el grid con grid-column and grid-row.
- Desde marzo del 2017, la mayoría de los navegadores apoyaban
no CSS Grid: Chrome (incluyendo Android), Firefox, Safari
(incluyendo iOS), y Opera.
- Para poder comenzar tienes que definir un elemento de container
con display: grid; definir los tamaños de las columnas y las filas con
grid-template-columns y grid-template-rows, y luego poner a sus
elementos hijos en el grid con grid-column and grid-row.
- Terminología Importante
- Antes de indagar más sobre el concepto de Grid, es muy
importante conocer la terminología
- Grid Container
- Es el elemento en el cual display: grid es
aplicado. Es el padre directo de todos
los grid items.
- Es el elemento en el cual display: grid es
aplicado. Es el padre directo de todos
los grid items.
- Grid Item
- Los hijos (descendientes
directos) del grid container.
- Los hijos (descendientes
directos) del grid container.
- Grid Line
- Las lineas divisoras que
hacen la estuctura del
grid.
- Las lineas divisoras que
hacen la estuctura del
grid.
- Grid Track
- El espacio entre dos lineas
de gird adyacentes.
- El espacio entre dos lineas
de gird adyacentes.
- Grid Cell
- El espacio entre las lineas de dos filas
adyacentes y dos columnas adyacentes
- El espacio entre las lineas de dos filas
adyacentes y dos columnas adyacentes
- Grid Area
- Un espacio total rodeado por cuatro
lineas de grid
- Un espacio total rodeado por cuatro
lineas de grid
- Grid Container
- Antes de indagar más sobre el concepto de Grid, es muy
importante conocer la terminología
Want to create your own Mind Maps for free with GoConqr? Learn more.