Grid – Manejo de Grid en CSS

Modalidades de grid

Tipo de elemento  Descripción

inline-grid  Establece una cuadrícula con ítems en línea, de forma equivalente a inline-block.

grid  Establece una cuadrícula con ítems en bloque, de forma equivalente a block.

Definir filas y columnas

Propiedad  Valor  Descripción

grid-template-columns  [col1] [col2] …  Establece el SIZE  de cada columna (col 1, col 2…).

grid-template-rows  [fila1] [fila2] …  Establece el SIZE de cada fila (fila 1, fila 2…).

Unidad fracción restante (fr)

 grid-template-columns: 1fr 1fr;

 grid-template-rows: 2fr 1fr;

Filas y columnas repetitivas

 grid-template-columns: 100px repeat(4, 50px) 200px;

 grid-template-rows: repeat(2, 1fr 2fr);

Función minmax()

Función  Descripción

minmax(min, max)  Define un rango entre min y max.

Atajo: La propiedad grid-template

Propiedad  Valores  Descripción

grid-template  none | grid-template-rows / grid-template-columns  Atajo para definir dimensiones del grid.

Huecos en grid

Propiedad  Descripción

column-gap  Establece el  de los huecos entre columnas (líneas verticales).

row-gap  Establece el  de los huecos entre filas (líneas horizontales).

gap  <row-gap> <columna-gap>

Propiedades de alineación

Propiedad  Valores  Afecta a…

justify-items  start | end | center | stretch  Elementos eje principal

align-ítems  start | end | center | stretch  Elementos eje secundario

justify-content  start | end | center | stretch | space-around | space-between | space-evenly  Contenido eje principal

align-content  start | end | center | stretch | space-around | space-between | space-evenly  Contenido eje secundario

Propiedad  Descripción

justify-self  Altera la alineación del ítem hijo en el eje horizontal y la sobrescribe con la indicada.

align-self  Altera la alineación del ítem hijo en el eje vertical y la sobrescribe con la indicada.

Propiedad  Valores  Descripción

place-items  [align-items] [justify-items]  Propiedad de atajo para *-items

place-content  [align-content] [justify-content]  Propiedad de atajo para *-content

place-self  [align-self] [justify-self]  Propiedad de atajo para *-self

Orden de los elementos

Propiedad  Valor  Descripción

order  0 | NUMBER  Número (peso) que indica el orden de aparición de los ítems.

Grid por áreas

Propiedad  Valores  Descripción

grid-template-areas  nombre | .  Indica la disposición de las áreas en el grid. Cada texto entre comillas simboliza una fila

grid-area  auto | nombre  Indica el nombre del área. Se usa sobre ítems hijos del grid.

   grid-template-areas: “head head”

                         “menu main”

                         “foot foot”;

  .item-1 { grid-area: head; background: blue; }

Inicio-fin de filas y columnas