Skip to content

Latest commit

 

History

History
248 lines (177 loc) · 6.94 KB

README.md

File metadata and controls

248 lines (177 loc) · 6.94 KB
Raw

Curso de CSS Grid Layout

Tabla de Contenido

Conceptos Fundamentales

  • Grid Container: va a ser el elemento padre que va a tener puesto un nuevo tipo de display: grid. Nos permite colocar otras propiedades para manipular nuestro layout.
  • Grid Item: Son hijos directos de grid. Son nuestro componentes, contenido, lo que vamos a manejar. Nuestras filas o columnas que vamos a mover a nuestro gusto.
  • Grid Line: Lineas divisorias horizontales y verticales.
  • Grid Track: Espacio entre dos líneas adyacentes. Filas y columnas.
  • Grid Cell: Celdas, espacio en dos filas adyacentes y 2 columnas adyacentes.
  • Grid Area: Espacio rodeado por 4 grid lines

Grid explicito (explicit grid) es cuando nosotros definimos el número de filas o columnas.

Grid implicito (implicit grid) es cuando tenemos filas o columnas que no definimos pero son parte de nuestro grid.

Propiedades

grid-template-columns: define el número de columnas en un grid layout, así como el tamaño en ancho de cada columna.

grid-template-columns: 200px 200px 200px;

grid-template-rows: Para definir las filas.

grid-template-rows: valores;

grid-template: Definir filas y columnas:

grid-template: filas / columnas;

Display subgrid para heredar la configuración del grid padre (cuando se estén anidando grids).

display: subgrid; //No disponible aun

Display inline-grid muestra el grid en una sola linea:

display: inline-grid; //No disponible aun

grid-column-gap Espaciado entre columnas

grid-column-gap: value;

grid-row-gap Espaciado entre filas

grid-row-gap: value;

grid-gap Espaciado entre filas y columnas

grid-gap: rows columns;

fr (fracciones) Unidad de medida. Distrubuye el espacio disponible en formas iguales.

Áreas

Si vamos a usar área en más de una columna colocamos el mismo donde del área donde la queramos.

grid-template-areas: "header header" 
                     "left contenido" 
                     "footer footer";

Para usar las áreas

.header {
  grid-area: header:
}

grid-column: Define cuántos espacios de columna va a tomar un grid item. El inicio toma desde la primera línea del grid.

grid-column-start: 1;
grid-column-end: 3;
grid-column: inicio / final;

Para definir por fracciones (columnas): span #fracciones

Para usar el espacio de toda la fila usamos -1 al final.
Ejemplo: grid-column: 1/ -1;

grid-row: Define cuántos espacios de fila va a tomar un grid item. El inicio toma desde la primera línea del grid.

grid-row-start: 1;
grid-row-end: 3;
grid-row: inicio / final;

Para definir por fracciones (columnas): span #fracciones Para usar el espacio de toda la fila usamos -1 al final.
Ejemplo: grid-column: 1/ -1;

Nombre a las líneas

Para definir las líneas se definen en el grid-template y se ponen los nombres entre [].

grid-template-columns: [inicio] 1fr [linea2] 1fr [final];
grid-template-rows: [inicio] 200px [inicio2] 200px [final];

Luego para usarlos es en el grid-column y grid-row

grid-column: destacado-end / destacado2-end;
grid-row: inicio / final;

Grid Implícito

Para cambiar el flujo automático de mi grid:

grid-auto-flow: column;

Por defecto viene grid-auto-flow: row;

Para asignar el valor por defecto de el espacio de las columnas o filas que no han sido asignadas:

grid-auto-columns: valores;
grid-auto-rows: valores;

Alinear Grid Items

Para alinear contenido, en el contenedor grid agregar:

justify-items: valor; /*para alineación horizontal*/
align-items: valor; /*para alineación vertical*/

Los valores que toman por defecto es stretch el cual hace que tomen todo el valor asignado en la fila o columna.

Para asignar la alineación de un solo elemento, agregar las siguientes propiedades en el grid item a modificar:

align-self: valor;
justify-self: valor;

Los valores que se pueden usar son los siguientes:

  • Stretch: Estira el contenido al espacio que nos de el grid.
  • Start: Coloca el contenido hacia el inicio(izquierda), y los elementos ocupan el ancho que tienen de contenido.
  • End: Coloca el contenido hacia la derecha, igual que start los elementos ocuparán el ancho que tienen de contenido.
  • Center: Los elementos quedarán al centro de la pantalla.

Alinear el Grid

Para alinear el contenido de filas y columnas:

justify-content: valor; /*Para alineación horizontal*/
align-content: valor; /*Para alineación vertical*/

Estos son los valores que se pueden usar:

  • start: Todo el grid se alinea a la izquierda
  • center: Todo el grid se alinea al centro
  • end: Todo el grid se alinea a la derecha
  • stretch: Cambia el tamaño de los grid items para que el llenen el ancho máximo del contenedor grid.
  • space-around: Los items tienen el mismo espacio a su alrededor.
  • space-evenly: Hay un espacio más homogéneo entre items.
  • space-between: Hay un mismo espacio entre items pero se eliminan el espacio inicial y final.

Funciones

repeat(cantidad de columnas, valor) para usar el mismo valor varias veces. minmax(min, max) agregar un valor mínimo y máximo para el tamaño al hacer responsive.

Recursos Complementarios

Enlaces de Interés